Angular: select (multiple)

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://silviomoreto.github.io/bootstrap-select/stylesheets/bootstrap-select.css">
<script src="http://silviomoreto.github.io/bootstrap-select/javascripts/bootstrap-select.js"></script>
    <div class="container">
                <div ng-controller="MyCntrl">
                      <select ng-model='color' multiple ng-multiple="true" ng-options='c.name for c in colors' select-multiple></select> 
                </div>
                <div>{{color}}</div>
    </div>

JavaScript

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

angular.module('myApp.controllers', [])
  .controller('MyCntrl', ['$scope', function($scope) {
        $scope.colors = [
                    {name:'black'},
                    {name:'white'},
                    {name:'red'},
                    {name:'blue'},
                    {name:'yellow'}
                  ];
        $scope.color = $scope.colors[2]; // red

  }]);

angular.module('myApp.directives', [])
  .directive('selectMultiple', function() {
    return function(scope, element, attributes){
        element.selectpicker({});

        scope.$watch(function () {
          return element[0].length;
         }, function () {
          element.selectpicker('rebuild');
         });  
          // Watch for any changes from outside the directive and refresh
        scope.$watch(attributes.ngModel, function () {
          element.selectpicker('refresh');
        });
    }
  });