Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

just started with angularjs and bootstrap. Got a sample to display buttons.

             <div ng-controller="ButtonsCtrl">
                  <h4>Checkbox</h4>
                  <pre>{{checkModel}}</pre>
                  <div>
                      <button type="button" class="btn btn-primary" ng-click="checkModel.KateSpade = true" btn-checkbox>Kate Spade</label>
                      <button type="button" class="btn btn-primary" ng-model="checkModel.LouisVuitton" btn-checkbox>LouisVuitton</label>
                      <button type="button" class="btn btn-primary" ng-model="checkModel.Burberry" btn-checkbox>Burberry</label>
                      <button type="button" class="btn btn-primary" ng-model="checkModel.CalvinKlien" btn-checkbox>Calvin Klien</label>
                      <button type="button" class="btn btn-primary" ng-model="checkModel.Forever21" btn-checkbox>Forever 21</label>
                  </div>
             </div>

How do I update the values of ng-model on click. My controller looks standard.

    app.controller('ButtonsCtrl', function($scope){
        console.log("ButtonsCtrl started");

        $scope.checkModel = {
            KateSpade: false,
            LouisVuitton: true,
            Burberry: false,
            CalvinKlien: false,
            Forever21: false
        };

   });
share|improve this question

1 Answer 1

The angular bootstrap UI website seems to use labels... Your HTML is incorrect. You have opening button tag and closing label tag. Also, your first button uses ng-click instead of ng-model. Try this in your HTML:

<div class="btn-group">
    <label class="btn btn-primary" ng-model="checkModel.KateSpade" btn-checkbox>Kate Spade</label>
    <label class="btn btn-primary" ng-model="checkModel.LouisVuitton" btn-checkbox>LouisVuitton</label>
    <label class="btn btn-primary" ng-model="checkModel.Burberry" btn-checkbox>Burberry</label>
    <label class="btn btn-primary" ng-model="checkModel.CalvinKlien" btn-checkbox>Calvin Klien</label>
    <label class="btn btn-primary" ng-model="checkModel.Forever21" btn-checkbox>Forever 21</label>
</div>

Also, make sure you are including and requiring the 'ui.bootstrap' module. Fiddle is here.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.