angularjs - ng-change,ng-click don't work with data-toggle="buttons" since v1.3.0

Question

for angular version 1.3.4. In the following snippet , the ng-change event does not work.

dependency: Bootstrap version 3.3.0

The below code works until version 1.2.27

javascript

var app = angular.module("demoApp", ['ngRoute']);

app.controller('DemoController', function ($scope) {
    init();
    function init() {
        $scope.newItemType = 'bill';
        $scope.change = function () {
            alert($scope.newItemType)
        };
    }
});

app.config(function ($routeProvider) {
    $routeProvider
        .when('/prerak/list', {
            controller: 'DemoController',
            templateUrl: '/app/views/demo.html'
        })
});

html

<h4>Demo</h4>

<br />

<div>
    <div class="btn-group" data-toggle="buttons">
       <label class="btn btn-success"> 
         <input type="radio" value="bill" ng-change="change()" ng-model="newItemType"> Insert New Bill <span class="glyphicon glyphicon-file"></span> 
      </label> 
      <label class="btn btn-success">
        <input type="radio" value="coin" ng-change="change()" ng-model="newItemType"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
      </label>
    </div>
           <br/><br/> Selected Item: <b>{{newItemType}}</b>
</div>

Following is the plunkr (for the simpler version) : http://plnkr.co/edit/yU9unxI8F6u2ToQzlUV2

Answer 1

You should not rely on Bootstrap javascript when you deal with Angular. Bootstrap's jQuery plugins are not tailored for Angular out of the box. If you want to use Bootstrap JS you should consider additional Angular modules like AngularUI Bootstrap or AngularStrap, which provide dedicated directives that implements corresponding Bootstrap plugins functionality.

Here is how it would look with AngularUI Bootstrap:

<div class="btn-group">
    <label class="btn btn-success" btn-radio="'bill'" ng-change="change()" ng-model="newItemType">
        Insert New Bill <span class="glyphicon glyphicon-file"></span>
    </label>
    <label class="btn btn-success" btn-radio="'coin'" ng-change="change()" ng-model="newItemType">
        Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
    </label>
</div>

Remember to declare new dependency in this case:

angular.module("demoApp", ['ui.bootstrap'])

Here is how it will look all together

angular.module("demoApp", ['ui.bootstrap']).controller('DemoController', function ($scope) {
    $scope.newItemType = 'bill';
    $scope.change = function () {
        console.log($scope.newItemType)
    };
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>

<div class="container" ng-app="demoApp" ng-controller="DemoController">
    <h2>Radio Buttons</h2>
    <div class="btn-group">
        <label class="btn btn-success" btn-radio="'bill'" ng-change="change()" ng-model="newItemType">
            Insert New Bill <span class="glyphicon glyphicon-file"></span>
        </label>
        <label class="btn btn-success" btn-radio="'coin'" ng-change="change()" ng-model="newItemType">
            Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
        </label>
    </div>
    <p>Selected Item: <b>{{newItemType}}</b></p>
</div>