19

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

Cœur
  • 37,241
  • 25
  • 195
  • 267
Prerak K
  • 10,940
  • 7
  • 30
  • 37

2 Answers2

20

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

dfsq
  • 191,768
  • 25
  • 236
  • 258
  • i saw the plunkr, but the effect is not maintained after you click the second button. Any idea what is that ? – Prerak K Jan 12 '15 at 12:56
  • Check updated demo http://plnkr.co/edit/pPTir7YGwJKt5L5oxVYX?p=preview I forgot to remove `data-toggle="buttons"` from div so Bootstrap plugin was messing with HTML. – dfsq Jan 12 '15 at 13:00
  • 1
    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. – Farhan Ghumra Sep 13 '16 at 06:45
  • 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. – Christian Maioli M. Mar 14 '17 at 17:33
  • @christan well, you didn't understand the answer. – dfsq Mar 14 '17 at 20:59
0

The easiest way is to move the ng-click to the enclosing label tag.

Patrick L
  • 151
  • 1
  • 9