title: Add glyphicon icon to a 'saved' selected item using ng-options
body: <p>What if we have this scenario ....</p>
  
  <p>A dropdown with 3 elements. Upon selecting an item and clicking the save button, the ng-model from the dropdown menu is binded with an html tag so that the ng-model now has a glyphicon icon appended before the item name.</p>
  
  <p>I have tried a basic implementation, however I was not able to complete it.</p>
  
  <p><strong>The Model</strong></p>
  
  <pre><code>var app = angular.module('myApp', ['ngSanitize'])
  app.controller('myController', function($scope){
      $scope.name = 'Dylan'
  
      $scope.saved = false
      $scope.data = [{
          'name' : 'Item 1',
          'color': 'red'
      },
      {
          'name' : 'Item 2',
          'color': 'blue'
      },
      {
          'name' : 'Item 3',
          'color': 'green'
      }]
  
      $scope.saveItem = function(item) {
          // var index = $scope.data.indexOf(item);
          // $scope.data[index].name = "&amp;#10003;" + item.name
          // console.log(index)
          $scope.binder =  " &amp;#10003; " + item.name;
      }
  
  })
  </code></pre>
  
  <p><strong>The View</strong></p>
  
  <pre><code>&lt;body ng-app="myApp"&gt;
      &lt;div ng-controller="myController"&gt;
        &lt;span class="glyphicon glyphicon-star" aria-hidden="true"&gt;&lt;/span&gt; {{name}}
  
      &lt;div class="row"&gt;
          &lt;div class="col-sm-2" &gt;
               &lt;select class="form-control selectPicker glyphicon" 
                       ng-model="selectedItem"
                       ng-options = "item as item.name for item in data"&gt;
              &lt;/select&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;br&gt; 
  
      &lt;button type="button"
              class="btn btn-danger"  
              ng-disabled="!selectedItem"     
              ng-click="saveItem(selectedItem)"&gt;
              Save
      &lt;/button&gt;
  
  
      &lt;div ng-bind-html="binder"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/dJLOL.png" rel="nofollow noreferrer">Preview of result</a></p>
  
  <p>What I want is this ....</p>
  
  <p>The current ng-model 'Item 1' is to be replaced/updated exactly like the binder (With the tick included).</p>
  
  <p>Furthermore, I tried to do the same thing using ng-repeat, however this is not an option for me as I need to use the object properties throughout the whole application. With ng-repeat, from my understanding, it seems that the selected value is a string rather than an object.</p>
  
  <p>Thanks in advance for any help or suggestions :)</p>