angularjs - Where to find angular-xeditable and ajax together work simple example -

now, using angular-xeditable.i want send edit data server.

<div ng-controller="ctrl">         <a href="#" id='username' editable-text="user.name">{{ user.name || "empty" }}</a> </div> 

and js code

    <script type="text/javascript">     var app = angular.module("app", ["xeditable"]);   app.controller('ctrl', function($scope,$http) {     $scope.user = {         name: 'awesome user'     };          $http.post("<?php echo base_url(); ?>index.php/welcome/test", {"name":name})       .success(function(data, status, headers, config) {        $scope.data = data;         })    .error(function(data, status, headers, config) {    $scope.status = status; });      }); </script> 

i received name variable empty value. code doesn't work.i can't find error.

you need invoke code posts server on onaftersave event, documented here: http://vitalets.github.io/angular-xeditable/#onaftersave

this event called after changes in inputbox have been set on model.

in html put function call in onaftersave attribute this:

<div ng-controller="ctrl">         <a href="#" id='username' onaftersave='postname()' editable-text="user.name">{{ user.name || "empty" }}</a> </div> 

in controller create postname function posts data server. code this:

<script type="text/javascript">     var app = angular.module("app", ["xeditable"]);       app.controller('ctrl', function ($scope, $http) {         $scope.user = {             name: 'awesome user'         };          // called on onaftersave event of xeditable         $scope.postname = function () {             $http.post("<?php echo base_url(); ?>index.php/welcome/test", {"name": $scope.user.name})                     .success(function (data, status, headers, config) {                         $scope.data = data;                      })                     .error(function (data, status, headers, config) {                         $scope.status = status;                     });         }     }); </script>