Bootstrap Angular Modal Issue

Question

For my application, (that I'm writing in Meteor using the angular-meteor/urigo) I have a button that when clicked on appears a model.

Code:

   <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
         <div class="modal-content">

           <div class="modal-body" ng-controller="formCtrl">
             <div ng-repeat="item in meal.items">
                <label>Item {{$index+1}} :
                    <input type="text" class="item" ng-model="item.name"><br>
                </label>
                <label>Calories :
                    <input type="number" class="calories" ng-model="item.cal">
                </label>
                <br>
             </div>
           </div>

           <div class="modal-footer">
              <button ng-click="addItem()" type="button" class="btn btn-primary">+Item</button>
           </div>
       </div>
    </div>
   </div>
 </div>

In the first "modal-body" class, I'm very confident that my code is right because its what I was doing before and now I'm just implementing bootstrap to make it look more elegant.

The problem occurs at the "modal-footer" class where the ng-click for the second button should produce 2 inputs :

 Item 1 : [______]
 Calories : [_______]

But for some reason, its not going to that function. I've been staring at this for the past 8 hours attempting to find an error but I can't seem to find any.

Answer 1

You're calling a method of formCtrl outside of it. Move the ng-controller attribute on the div.modal-content , or move the button inside the div holding the ng-controller attribute