ng-change,ng-click don’t work with data-toggle=“buttons” since v1.3.0

ng-change,ng-click don’t work with data-toggle=“buttons” since v1.3.0

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

Demo


Selected Item: {{newItemType}}

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

Solutions/Answers:

Solution 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:

Related:  Good way to dynamically open / close a popover (or tooltip) using angular, based on expression?
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

References