<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.2.16/angular.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/nidhishkrishnan/ngSelectBox/master/ngSelectBox.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="app">
<div ng-controller="MainCtrl">
<b>ngSelectBox</b>
<ng-select-box ng-model="livingBeing" width="150px">
<ng-option label="- - Select your choice - -" value="?"></ng-option>
<ng-optgroup label="{{categories.type}}" value="{{categories}}" ng-repeat="categories in zoo">
<ng-option label="{{livingBeing.name}}" value="{{livingBeing}}" selected="{{livingBeing.name ==='Dog' ? 'true' : 'false'}}" image="{{livingBeing.img}}" text-color="{{categories.type==='Animals'? 'red' : 'blue'}}" ng-repeat="livingBeing in categories.list"></ng-option>
</ng-optgroup>
</ng-select-box>
<br>
<b>Classic Select Box</b> (Down)
<li>Cannot add Images</li>
<li>Cannot Select the Option Header</li>
<li>No Text Styling Feature</li>
<br>
<select ng-model="livingBeing">
<option value="0">- - Select your choice - -</option>
<optgroup label="{{categories.type}}" ng-repeat="categories in zoo">
<option value="{{livingBeing}}" ng-repeat="livingBeing in categories.list">{{livingBeing.name}}</option>
</optgroup>
</select>
<br>
<br>
</div>
</body>
</html>
angular.module('app', ['ngSelectBox'])
.controller('MainCtrl', function($scope) {
$scope.zoo = [{
id: 12,
type: 'Animals',
img: "https://taiwanease.com/en/forums/images/smilies/e04f.png",
list: [{ id: 56, name: "Cat", img: "https://taiwanease.com/en/forums/images/smilies/e04f.png"},
{ id: 57, name: "Dog", img : "http://www.nittanygreys.org/i/nodogs.png"},
{ id: 58, name: "Elephant", img : "http://fc00.deviantart.net/fs71/f/2013/094/d/5/elephantyellow_by_mandarimvu-d60fpl8.png"}]
}, {
id: 13,
type: 'Birds',
img: "http://owleyesmagazine.com/sites/default/files/owlpoints_0.png",
list: [{ id: 59, name: "Parrot", img: "http://tochki.su/tibiame/img/game/parrot.png"},
{ id: 60, name: "Owl" ,img: "http://owleyesmagazine.com/sites/default/files/owlpoints_0.png"},
{ id: 61, name: "Duck" ,img: "http://howtomanguide.com/img/duck.png"}
]
}];
});
/* Styles go here */