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

Casuist

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>

Demo: http://plnkr.co/edit/pPTir7YGwJKt5L5oxVYX?p=preview

Deft

i saw the plunkr, but the effect is not maintained after you click the second button. Any idea what is that ? – Casuist

Check updated demo plnkr.co/edit/pPTir7YGwJKt5L5oxVYX?p=preview I forgot to remove data-toggle="buttons" from div so Bootstrap plugin was messing with HTML. – Deft

If you are using latest version of Angular Bootstrap, the plunkr won't work. You need to change btn-radio attribute to uib-btn-radio in label tag. – Retrocede

Great answer but it doesn't answer the actual question of how to get ng-model and data-toggle to work together, it's just an alternate solution. – Hime

@christan well, you didn't understand the answer. – Deft