Bootstrap switchand angular initialization

Question

I 've a problem with bootstrap switch initialization

<span style="margin-right: 5px;">{{accessory.name}} </span> 
   <input   type="checkbox" name="accessory{{accessory.id}}"
       data-ng-model="accessory.value" data-ng-attr-id="{{accessory.id}}"
       data-ng-attr-topic="{{accessory.topic}}" bootstrap-switch>

ng-model doesn't initialize the status, it is always false. I've tried even with ng-checked="{{accessory.value}}" but nothing is changed. If I use checked or checked="checked" all work fine. Do you have any advice?

This is the directive for bootstrap switch:

app.directive('bootstrapSwitch', 
        ['$http',
         function($http) {
            return {
                restrict: 'A',
                require: '?ngModel',
                link: function(scope, element, attrs, ngModel) {
                    element.bootstrapSwitch({size: "small", onColor:"success", offColor:"danger"});
                    //ngModel.$setViewValue(false); //set start status to false
                    element.on('switchChange.bootstrapSwitch', function(event, state) {
                        if (ngModel) {
                            scope.$apply(function() {
                                ngModel.$setViewValue(state);
                            });
                        }
                    });

                    scope.$watch(attrs.ngModel, function(newValue, oldValue) {
                        if (newValue!= oldValue){
                            $http({
                                method: 'PUT',
                                url: '/reservations/' + document.getElementById("hiddenIdReservation").value + '/accessories/'+ element[0].attributes.id.value,
                                params: {topic: element[0].attributes.topic.value, value: newValue}
                            }).then(function successCallback(response) {
                                if (typeof response.data.success == 'undefined'){
                                    window.location.href = "/500";
                                }else if (response.data.success==true){
                                    if (newValue) {
                                        element.bootstrapSwitch('state', true, true);
                                    } else {
                                        element.bootstrapSwitch('state', false, true);
                                    }
                                }else if (response.data.success==false)
                                    notifyMessage(response.data.result, 'error');
                            }, function errorCallback(response) {
                                window.location.href = "/500";
                            });
                        }
                    });
                }
            };
        }
        ]
);

with the comment of ngModel.$setViewValue(false); value is true but the switch is still on off.

Answer 1

When initializing, the directive the ng-checked is getting missed by the JQuery initialization function. So what I suggest is just update the ng-model value to the switch.

var app = angular.module('myApp', []);
app.controller('MyController', function MyController($scope) {
  $scope.accessory = {
    name: "test",
    id: 1,
    value: "true",
    topic: 'test'
  };
  $scope.testing = true;
}).directive('bootstrapSwitch', ['$http',
  function($http) {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function(scope, element, attrs, ngModel) {
        element.bootstrapSwitch({
          size: "small",
          onColor: "success",
          offColor: "danger"
        });
        element.on('switchChange.bootstrapSwitch', function(event, state) {
          if (ngModel) {
            scope.$apply(function() {
              ngModel.$setViewValue(state);
            });
          }
        });
        scope.$watch(ngModel, function(newValue, oldValue) {
          if (newValue) {
            element.bootstrapSwitch('state', true, true);
          } else {
            element.bootstrapSwitch('state', false, true);
          }
        });
      }
    }
  }
]);

Here is a working example of the same.

JSFiddle Demo

I have left out the scope.$watch stuff since it is not causing the problem!