Wrapping ui-select with angularjs custom directive -

yes, there couple of similar questions on so, none seem address issue (or work recent versions of angular 1.5.8 , angular ui-select 1.4.x).

the problem i'm having bi-directional data binding. when try bind model ui-select, if without directive wrapped ui-select, works. when use wrapped ui-select, updated in 1 direction, until modify model within directive.

index.html

  <div class="form-group">     <label class="control-label" for="test">test</label>     <ui-select id="test" multiple="" ng-model="vm.selectedinstrument.gradelevels" theme="bootstrap" close-on-select="false" append-to-body="true" style="min-width: 250px">       <ui-select-match placeholder="this test">{{$item.name}}</ui-select-match>       <ui-select-choices repeat="opt in vm.gradelevellist | filter:$select.search">         <div ng-bind-html="opt.name | highlight: $select.search"></div>       </ui-select-choices>     </ui-select>     <span class="help-block">           {{vm.selectedinstrument | json}}       </span>   </div>   <tag-input ng-model="vm.selectedinstrument.gradelevels" placeholder="select 1 or more..." label-text="grade levels" options="vm.gradelevellist" ele-id="gradeleveltaginput"></tag-input> 

tag-input-directive.js

(function () {     'use strict';      angular.module('surveyexplorer')         .directive('taginput', taginput);      function taginput() {         return {             restrict: 'e',             templateurl: 'tag-input.html',             scope: {                 options: '=',                 editmode: '=',                 labeltext: '@',                 eleid: '@s',                 placeholder: "@"             },             require: ['?ngmodel'],             link: function (scope, elem, attrs, ctrls) {                 var ngmodelctrl = ctrls[0];                 ngmodelctrl.$render = function() {                     scope.innermodel = ngmodelctrl.$viewvalue;                 };                  scope.$watch('innermodel', function(newval, oldval){                    if (newval !== oldval) {                        ngmodelctrl.$setviewvalue(newval);                    }                 });             }         };     } })(); 

tag-input.html

<div class="form-group">     <label class="control-label" for="{{eleid}}">{{labeltext}}</label>      <ui-select id="{{eleid}}" multiple ng-model="innermodel" theme="bootstrap" close-on-select="false"                append-to-body="true" style="min-width: 250px">         <ui-select-match placeholder="{{placeholder}}">{{$item.name}}</ui-select-match>         <ui-select-choices repeat="opt in options | filter:$select.search" class="scrollable-menu">             <div ng-bind-html="opt.name | highlight: $select.search"></div>         </ui-select-choices>     </ui-select>     <span class="help-block">         {{innermodel}}     </span> </div> 

script.js

(function(angular) {   'use strict'; angular.module('surveyexplorer', [         'ngsanitize',         'nganimate',         'ui.bootstrap',         'ui.select',         ])   .controller('instrumentctrl', [function() {      var vm = this;     vm.selectedinstrument = {       gradelevels: []     };      vm.gradelevellist = [{         "code": "it",         "name": "infant/toddler",         "sortorder": 1000,         "gradelevelid": 1     }, {         "code": "pr",         "name": "preschool",         "sortorder": 2000,         "gradelevelid": 2     }, {         "code": "pk",         "name": "prekindergarten",         "sortorder": 3000,         "gradelevelid": 3     }, {         "code": "tk",         "name": "transitional kindergarten",         "sortorder": 4000,         "gradelevelid": 4     }, {         "code": "kg",         "name": "kindergarten",         "sortorder": 5000,         "gradelevelid": 5     }, {         "code": "1",         "name": "first grade",         "sortorder": 6000,         "gradelevelid": 6     }, {         "code": "2",         "name": "second grade",         "sortorder": 7000,         "gradelevelid": 7     }, {         "code": "3",         "name": "third grade",         "sortorder": 8000,         "gradelevelid": 8     }, {         "code": "4",         "name": "fourth grade",         "sortorder": 9000,         "gradelevelid": 9     }, {         "code": "5",         "name": "fifth grade",         "sortorder": 10000,         "gradelevelid": 10     }];    }]);  })(window.angular); 

i've created plunker of problem here: https://plnkr.co/edit/yn1qhmjkuij7fm8unpad

notice when add tags top control, updates data model in bottom control. when add tags bottom control, stops updating data model. suspect has how model getting bound using ng-model.

any graciously appreciated.

fwiw, thread similar problem: angularjs pass ngmodel wrapper directive wrapped directive when try mimic solution, gets me point right now.

so found solution, understand "why" works not 100% sure why.

so first off, simplified directive:

tag-input-directive.html

(function () {     'use strict';      angular.module('surveyexplorer')         .directive('taginput', taginput);      function taginput() {         return {             restrict: 'e',             templateurl: 'tag-input.html',             scope: {                 ngmodel: '=',                 options: '=',                 editmode: '=',                 labeltext: '@',                 eleid: '@s',                 placeholder: "@"             },             controller: function($scope) {               $scope.innermodel = $scope;             }         };     } })(); 

where assign passed in scope property on scope within controller function:

controller: function($scope) {   $scope.innermodel = $scope; } 

then updated references ngmodel in template use innermodel.ngmodel:

tag-input.html

<div class="form-group">     <label class="control-label" for="{{eleid}}">{{labeltext}}</label>      <ui-select id="{{eleid}}" multiple ng-model="innermodel.ngmodel" theme="bootstrap" close-on-select="false"                append-to-body="true" style="min-width: 250px">         <ui-select-match placeholder="{{placeholder}}">{{$item.name}}</ui-select-match>         <ui-select-choices repeat="opt in options | filter:$select.search" class="scrollable-menu">             <div ng-bind-html="opt.name | highlight: $select.search"></div>         </ui-select-choices>     </ui-select>     <span class="help-block">         {{innermodel.ngmodel}}     </span> </div> 

here's link functioning plunkr: https://plnkr.co/edit/eq9pil8kohz2puta2plu?p=preview

i suspect within ui-select clobbering scope, not quite sure how prove or track down without lot of additional effort.