Angular Xeditable drop down e-ng-change is not working

Question

I'm using Angular Xeditable api.I need to change the text field's value according to the value of the drop down.But it's not working.Could you tell me why ? Thanks.

Html

<td>
<span editable-select="user.status" e-form="tableform" e-ng-options="s.value as s.text for s in statuses" e-ng-change="setName($data,user)">
   {{ showStatus(user) }}
</span>
</td>

js

 $scope.setName = function (id, user) {
                var selected = [];
                if (id) {
                    selected = $filter('filter')($scope.statuses, { value: id });
                }

                if (selected.length) {
                    user.name = selected[0].text;
                }
            };

Generated html : you can see that it has been changed text of the name filed as expected (status3).But it doesn't update the text box properly. In other words it doesn't show on the text box.Why ?

<td>
  <!-- editable username (text with validation) -->
 <span editable-text="user.name" e-form="tableform" onbeforesave="checkName($data, user.id)" class="ng-scope ng-binding editable editable-hide">
             status3
  </span><span class="editable-wrap editable-text ng-scope"><div class="editable-controls form-group" ng-class="{'has-error': $error}"><input type="text" class="editable-input form-control ng-pristine ng-valid" ng-model="$data"><div class="editable-error help-block ng-binding" ng-show="$error" ng-bind="$error" style="display: none;"></div></div></span>
</td>

UPDATE :

I have tried like this.But then it changes all the rows values.So how can I detect only the changed row ?

 $scope.setName = function (id, user,form) {
                var selected = [];
                if (id) {
                    selected = $filter('filter')($scope.statuses, { value: id });
                }

                if (selected.length) {
                    for (var i = 0; i < form.$editables.length; i++) {
                        if (form.$editables[i].name === 'user.name') {
                           form.$editables[i].scope.$data ="sampath"                             
                        }
                      }
                }
            }; 

Here is the JsFiddle

Answer 1

I try with your old source code and it's works for me:

if (selected.length) {
   user.name = selected[0].text;
}

May be i miss understand your problem.

http://jsfiddle.net/NfPcH/14573/

Answer 2

If I understand it right, you just want to update the text on the textbox (which is bound to the user's name) depending on the status change, right?

If so, then your UPDATED code is too complicated. Just update the property directly on the user object passed to the setName function (like in your first example). It is already bound to the textbox, so you don't have to go all the way around and update the textbox directly. That's the whole point of using angular. You update the models on the scope and the rest happens automatically.

$scope.setName = function (id, user) {
    if (!id || !user) {
        // Do something to handle this...
        return;
    }
    var selected = $filter('filter')($scope.statuses, { value: id });
    selected = selected.length ? selected[0] : null;
    user.name = 'sampath (' + selected.text + ')';
};

Here is an udpated fiddle: http://jsfiddle.net/NfPcH/14765/