title: AngularJS How to apply different icons in ng-repeat <li>?
body: <p>Is there any option to show different <code>glyphicon</code> icons depends on the item title, The things is that the <code>JSON</code> menu list may <strong>vary</strong></p>
  
  <p>DEMO <a href="http://codepen.io/anon/pen/doZZgp" rel="nofollow">http://codepen.io/anon/pen/doZZgp</a>
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('myApp', []);
  
  app.controller('myCtrl', function($scope){
    $scope.menuList = [
      {page: "dashboard", title: "Dashboard"},
      {page: "ui", title: "UI"},
      {page: "expense", title: "Expenses"},
      {page: "invoice", title: "Invoice"},
      {page: "recur", title: "Reccurring Bills"},
      {page: "profile", title: "My Profile"},
      {page: "settings", title: "Settings"},
      {page: "login", title: "Login"},
      {page: "phonebook", title: "Phone book"}
    ]
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;div ng-app='myApp' ng-controller="myCtrl"&gt;
    &lt;ul class="nav"&gt;
      &lt;li ng-repeat="menu in menuList"&gt;&lt;a href="#{{menu.page}}"&gt;&lt;span class="glyphicon glyphicon-book"&gt;&lt;/span&gt; {{menu.title}}&lt;/a&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>