Issue in updating local model in angular xeditable

angularjs, javascript, jquery, x-editable

Solution

@Pravin I think that I found a solution. I had the situation where I needs update the xeditable model when user select the dictionary entry on typeahead input. I was looking the solution and I found the following way:

<span editable-text="p.name" e-name="name" e-form="productForm" e-required
  e-typeahead="product as product.name for product in getProducts($viewValue) | filter:$viewValue | limitTo: 8"
  e-typeahead-editable="true" e-ng-maxlength="256" e-typeahead-focus-first="false"
  e-typeahead-on-select='onSelectProductFromDictionary($item, $model, productForm)'>
     {{ p.name }}
</span>

And the method which update the xeditable data:

    $scope.onSelectProductFromDictionary = function ($item, $model, form) {

        angular.forEach(form.$editables, function(editable) {
            if (editable.name === 'name') {
                return;
            }
            editable.scope.$data = $model.something; // this is a dictionary model
            editable.save(); // move the value from edit input to view xeditable value
            editable.hide(); // hide the specific xeditable input if you needs
        });

    };

I hope it helps.

UPDATE [JSFIDDLE]

https://jsfiddle.net/fLc2sdd2/

Problem

I am trying to create a form , where one text field value depends on another text box. With reference to angularjs, By default xeditable update local model after clicking save.But i would like to update the model instantly and show the updated value in another text box ``` <span editable-text="user.name" e-ng-model="user.name" e-name="name"></span> <span editable-text="user.username" e-ng-model="user.username" e-name="username"></span> ``` I have enclosed the sample working code in jsfiddle

Original source