title: Accessing AngularJS UI-Select selected value
body: <p>Currently i have multiple dropdown directives that share the same array of dropdown values. When I make a selection, it'll update the rest of the dropdown selected value as well how do I go about having a unique selection for the rest of my dropdowns.</p>
  
  <p>My current work around would be setting <code>ng-model="ctrl.ngModel"</code> however I will not be able to access the dropdown selected value.</p>
  
  <p>dropdown.html</p>
  
  <pre><code>&lt;div&gt;
    &lt;ui-select name='' ng-model="ctrl.ngModel.selected" theme="bootstrap" class='expiry admin-expiry'
      append-to-body='true'
      reset-search-input='true'
      on-select="ctrl.update()"&gt;
      &lt;ui-select-match placeholder=""&gt;{{$select.selected.value}}&lt;/ui-select-match&gt;
      &lt;ui-select-choices repeat="choice in ctrl.choices | filter: $select.search"
        position='down'&gt;
        &lt;span ng-bind-html="ctrl.trustAsHtml(choice.value)"&gt;&lt;/span&gt;
      &lt;/ui-select-choices&gt;
    &lt;/ui-select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>controller.js</p>
  
  <pre><code>  function ColDropdownDirective() {
      return {
        restrict: 'EA',
        scope: {
          ngModel: '=',
          choices: '='
        },
        controller: ['FxoUtils', function(_) {
          var ctrl = this;
          this.trustAsHtml = function(value) {
            return _.trustAsHtml(value);
          };
  
          this.update = function() {
            console.log(ctrl.ngModel.selected);
          };
        }],
        controllerAs: 'ctrl',
        bindToController: true,
        templateUrl: 'js/fxo/admin/thresholdconfig/common/common.col.dropdown.html'
      };
    }
  </code></pre>