How to change ng-model scope value in custom Angular directive?

Question

There is the following custom directive code:

 angular.module('app.directives', ['ng']).directive('liveSearch', [
    '$compile', '$timeout', function($compile, $timeout) {
      return {
        restrict: 'E',
        replace: true,
        require: 'ngModel',
        scope: {
          ngModel: '=',
          liveSearchCallback: '=',
          liveSearchSelect: '=?',
          liveSearchItemTemplate: '@',
          liveSearchWaitTimeout: '=?',
          liveSearchMaxResultSize: '=?',
          liveSearchResultField: '=?'
        },
        template: "<input type='text' />",
        link: function(scope, element, attrs, controller) {
          scope.$watch('selectedIndex', function(newValue, oldValue) {
            var item;
            item = scope.results[newValue];
            if (item) {
              scope.ngModel = '10';
              element.val(item[attrs.liveSearchResultField]
            }
          });
        }
}}]);

It's not a complete code of my directive, but it's enough to understand the problem. Also view code:

   <live-search class="form-control" id="search1" live-search-callback="mySearchCallback" live-search-result-field="title"ng-model="skill" type="text"></live-search>
   Value: {{ skill }}
   <button class="btn btn-success" type="submit" ng-click="createEmployee">Сохранить</button>

My controller code:

$scope.createEmployee = function() {
        console.log($scope.skill);
};

As you can see my custom directive has 'ng-model' attribute with name of variable 'skill'. How can I change 'skill' value in my custom directive? My way doesn't work. Thanks in advance!

Answer 1

In your link: try using

link:function(scope, element, attrs, ngModel){
    scope.$watch('selectedIndex', function(newValue, oldValue) {
       var item;
       item = scope.results[newValue];
       if (item) {
         ngModel.$setViewValue(10);
         ngModel.$render() // will update the input value as well
         element.val(item[attrs.liveSearchResultField];
       }
    });
}

also it seems you have missed space between to separate ng-model attribute in your HTML

<live-search class="form-control" id="search1" live-search-callback="mySearchCallback" live-search-result-field="title" ng-model="skill" type="text"></live-search>

See the documentation here

Answer 2

When you use require: 'ngModel' , the 4th parameter passed to your link function is ngModelController . Use method $setViewValue to update the value of ngModel passed to your directive, then call $render() if your view needs to be updated as well.

link: function(scope, element, attrs, ngModelController) {
  scope.$watch('selectedIndex', function(newValue, oldValue) {
    var item;
    item = scope.results[newValue];
    if (item) {
      ngModelController.$setViewValue(10);
      ngModelController.$render();
      element.val(item[attrs.liveSearchResultField]
    }
  });
}