AngularJS How to apply different icons in ng-repeat <li>?

Question

Is there any option to show different glyphicon icons depends on the item title, The things is that the JSON menu list may vary

DEMO http://codepen.io/anon/pen/doZZgp

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"}
  ]
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller="myCtrl">
  <ul class="nav">
    <li ng-repeat="menu in menuList"><a href="#{{menu.page}}"><span class="glyphicon glyphicon-book"></span> {{menu.title}}</a>
    </li>
  </ul>
</div>

Answer 1

Not sure if this is best practice or even a correct way to do this, but if you have control over the JSON, could you add the glyphicon class to the JSON?

var app = angular.module('myApp', []);

app.controller('myCtrl', function($scope){
$scope.menuList = [
 {page: "dashboard", title: "Dashboard"},
  {page: "ui", title: "UI", glyphicon: "icon-name"},
  {page: "expense", title: "Expenses", glyphicon: "icon-name"},
  {page: "invoice", title: "Invoice", , glyphicon: "icon-name"},
  {page: "recur", title: "Reccurring Bills", glyphicon: "icon-name"},
  {page: "profile", title: "My Profile", glyphicon: "icon-name"},
  {page: "settings", title: "Settings", glyphicon: "icon-name"},
  {page: "login", title: "Login", glyphicon: "icon-name"},
  {page: "phonebook", title: "Phone book", glyphicon: "icon-name"}
  ]
});

And the HTML code could be

  <ul class="nav">
    <li ng-repeat="menu in menuList"><a href="#{{menu.page}}"><span class="glyphicon glyphicon-{{menu.glyphicon}}"></span> {{menu.title}}</a>
</li>

Answer 2

In your HTML just add the page title to glyphicon-:

<li ng-repeat="menu in menuList">
    <a href="#{{menu.page}}">
        <span class="glyphicon glyphicon-{{ menu.page }}"></span> 
        {{menu.title}}
    </a>
</li>

And make sure the 'page' properties are the same as the glyphicon names.

Answer 3

While myself would use the "add to JSON" method suggested by kib, you can also put it inside a function if you like, if your JSON comes from ajax.

<span class="glyphicon" ng-class="getClass(menu.page)"></span>

$scope.getClass = function (page) {
    switch(page) {
        case "dashboard": return "glyphicon-book";
        case ...
    }
}