Wrapping ui-select with angularjs custom directive
<p>Yes, there are a couple of similar questions like this on SO, but none seem to address my issue (or work with recent versions of Angular 1.5.8 and Angular UI-Select 1.4.x).</p>

<p>The problem I'm having is with bi-directional data binding.  When I try to bind my model to ui-select, if I do it without a directive wrapped ui-select, it works.  However when I use the wrapped ui-select, it updated in one direction, until I modify the model within the directive.</p>

<p><strong>index.html</strong></p>

<pre><code>  &lt;div class="form-group"&gt;
    &lt;label class="control-label" for="TEST"&gt;TEST&lt;/label&gt;
    &lt;ui-select id="TEST" multiple="" ng-model="vm.selectedInstrument.gradeLevels" theme="bootstrap" close-on-select="false" append-to-body="true" style="min-width: 250px"&gt;
      &lt;ui-select-match placeholder="THIS IS A TEST"&gt;{{$item.name}}&lt;/ui-select-match&gt;
      &lt;ui-select-choices repeat="opt in vm.gradeLevelList | filter:$select.search"&gt;
        &lt;div ng-bind-html="opt.name | highlight: $select.search"&gt;&lt;/div&gt;
      &lt;/ui-select-choices&gt;
    &lt;/ui-select&gt;
    &lt;span class="help-block"&gt;
          {{vm.selectedInstrument | json}}
      &lt;/span&gt;
  &lt;/div&gt;
  &lt;tag-input ng-model="vm.selectedInstrument.gradeLevels" placeholder="Select one or more..." label-text="Grade Levels" options="vm.gradeLevelList" ele-id="gradeLevelTagInput"&gt;&lt;/tag-input&gt;
</code></pre>

<p><strong>tag-input-directive.js</strong></p>

<pre><code>(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);
                   }
                });
            }
        };
    }
})();
</code></pre>

<p><strong>tag-input.html</strong></p>

<pre><code>&lt;div class="form-group"&gt;
    &lt;label class="control-label" for="{{eleId}}"&gt;{{labelText}}&lt;/label&gt;

    &lt;ui-select id="{{eleId}}" multiple ng-model="innerModel" theme="bootstrap" close-on-select="false"
               append-to-body="true" style="min-width: 250px"&gt;
        &lt;ui-select-match placeholder="{{placeholder}}"&gt;{{$item.name}}&lt;/ui-select-match&gt;
        &lt;ui-select-choices repeat="opt in options | filter:$select.search" class="scrollable-menu"&gt;
            &lt;div ng-bind-html="opt.name | highlight: $select.search"&gt;&lt;/div&gt;
        &lt;/ui-select-choices&gt;
    &lt;/ui-select&gt;
    &lt;span class="help-block"&gt;
        {{innerModel}}
    &lt;/span&gt;
&lt;/div&gt;
</code></pre>

<p><strong>script.js</strong></p>

<pre><code>(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);
</code></pre>

<p>I've created a Plunker of the problem here:
<a href="https://plnkr.co/edit/Yn1qhMjKuij7FM8Unpad" rel="nofollow noreferrer">https://plnkr.co/edit/Yn1qhMjKuij7FM8Unpad</a></p>

<p>Notice that when you add tags to the top control, it updates the data model in the bottom control.  However when you add tags to the bottom control, it stops updating the data model. I suspect it has to do with how the model is getting bound using <code>ng-model</code>.</p>

<p>Any help graciously appreciated.</p>

<p>FWIW, This thread is the most similar to my problem: <a href="https://stackoverflow.com/questions/29915223/angularjs-pass-ngmodel-from-wrapper-directive-to-wrapped-directive">angularjs pass ngModel from wrapper directive to wrapped directive</a> however when I try to mimic this solution, it only gets me to the point I am right now.</p>