fix() changed to $timeout to support ngRepeat of ngOptions

Author: joaoneto

demo/index.html

@@ -150,6 +150,25 @@ <h3>Works with option data-content</h3>
                         <option data-content="<span class='label label-inverse'>btn-inverse</span>" value="inverse">btn-inverse</option>
                     </select>
                 </div>
+                <div>
+                    <h3>Works with option data-icon</h3>
+                    <p>TODO: interpolate</p>
+                    <select selectpicker="" ng-model="color">
+                        <option data-icon="glyphicon glyphicon-search" value="primary">btn-primary</option>
+                        <option data-icon="glyphicon glyphicon-thumbs-up" value="info">btn-info</option>
+                        <option data-icon="glyphicon glyphicon-bell" value="success">btn-success</option>
+                        <option data-icon="glyphicon glyphicon-phone" value="danger">btn-danger</option>
+                        <option data-icon="glyphicon glyphicon-globe" value="warning">btn-warning</option>
+                        <option data-icon="glyphicon glyphicon-play" value="inverse">btn-inverse</option>
+                    </select>
+                </div>
+                <div>
+                    <h3>Works with option data-icon and ngOptions</h3>
+                    <select selectpicker="">
+                      <option value="">Select one</option>
+                      <option ng-repeat="i in icons" value="{{i.id}}" data-icon="{{i.icon}}">{{i.title}}</option>
+                    </select>
+                </div>
             </section>
         </div>
     </div>

demo/select-demo-app.js

@@ -21,4 +21,10 @@ angular.module('selectDemoApp', [
 
 .controller('StyleCtrl', function ($scope, $timeout) {
   $scope.color = 'success';
+  $scope.icons = [
+    { id: 0, icon: 'glyphicon glyphicon-search', title: 'Search' },
+    { id: 1, icon: 'glyphicon glyphicon-headphones', title: 'Headphones' },
+    { id: 2, icon: 'glyphicon glyphicon-ok', title: 'Ok' },
+    { id: 3, icon: 'glyphicon glyphicon-user', title: 'User' }
+  ];
 })

src/angular-bootstrap-select.js

@@ -143,7 +143,7 @@ function dropdownCloseDirective() {
  */
 
 angular.module('angular-bootstrap-select', [])
-  .directive('selectpicker', ['$parse', selectpickerDirective]);
+  .directive('selectpicker', ['$parse', '$timeout', selectpickerDirective]);
 
 /**
  * @ngdoc directive
@@ -174,7 +174,7 @@ angular.module('angular-bootstrap-select', [])
  * ```
  */
 
-function selectpickerDirective($parse) {
+function selectpickerDirective($parse, $timeout) {
   return {
     restrict: 'A',
     priority: 1000,
@@ -187,16 +187,18 @@ function selectpickerDirective($parse) {
       }
 
       attrs.$observe('spTheme', function (val) {
-        scope.$applyAsync(function () {
+        $timeout(function () {
           element.data('selectpicker').$button.removeClass(function (i, c) {
             return (c.match(/(^|\s)?btn-\S+/g) || []).join(' ');
           });
           element.selectpicker('setStyle', val);
         });
       });
 
-      element.selectpicker($parse(attrs.selectpicker)());
-      element.selectpicker('refresh');
+      $timeout(function () {
+        element.selectpicker($parse(attrs.selectpicker)());
+        element.selectpicker('refresh');
+      });
 
       if (attrs.ngModel) {
         scope.$watch(attrs.ngModel, refresh, true);
@@ -207,7 +209,7 @@ function selectpickerDirective($parse) {
       }
 
       scope.$on('$destroy', function () {
-        scope.$applyAsync(function () {
+        $timeout(function () {
           element.selectpicker('destroy');
         });
       });