AngularJS - ng-model not working with bootstrap directives

Question

I am using AngularJS for my project and I am new to it. But I liked its features and very convenient for development as well. But I came up with the following issue and didn't know to get out of it.

I have a multi view application. The following code is a part of signup view. This view gets displayed when the signup button is pressed. Now the issue is, in the 4th and 5th line below, I have attached a ng-model attribute to and I am able to print the number obtained using {{num}} directive. However, the ng-model num2 below is not getting displayed as above. All I get is the static text {{num2}} being displayed. Why is it not working like the previous case?

<form role='form' action='#/app/register_db' method='post'>
    <h1><small><b>Sign Up Information<b></small></h1>
    <br>
    <input type='text' ng-model='num'>
    <h1>{{num}}</h1>
    <div class='row'>
        <input type='text' ng-model='num2'>
        <h1>{{num2}}</h1>
        <div class='col-xs-5'>
            <input type="text" class='form-control' id="fn" name='firstname' ng-model='ng-firstname' placeholder="First Name">
        </div>
    </div>
...
...

I am new to AngularJS and I am very quickly grasping concepts. So if I am missing something, then please guide me through the right path and help me fix this issue.

I am using angularJS and Bootstrap CSS.

Thanks.

Works for me, jsfiddle.net/jJbk5 ( Placed ng-app on top level element ) — Philipp Gayret
– Philipp Gayret, Commented Feb 4, 2014 at 14:17
@user1066946 I tried the same. with ng-app. Its not working. jsfiddle.net/82wGS/1 — shar
– shar, Commented Feb 4, 2014 at 15:10
@user1066946 See this. It works before the <div class='col-xs-'> but not within it. jsfiddle.net/82wGS/2 — shar
– shar, Commented Feb 4, 2014 at 15:13

Philipp Gayret · Accepted Answer · 2014-02-04 15:19:49Z

1

You should get the following error message in your browser's console:

[ngModel:nonassign] Expression 'ng-firstname' is non-assignable. Element: <input type="text" class="form-control" id="fn" name="firstname" ng-model="ng-firstname" placeholder="First Name">

As ng-model="ng-firstname" is not a reference by name, but an expression AngularJS will try to evaluate, so simply not using a dash will fix that. What happens when you break the code there is AngularJS basically stops, and anything else AngularJS would usually do in elements that follow, simply doesn't happen.

answered Feb 4, 2014 at 15:19

Philipp Gayret

5,1401 gold badge30 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

shar Over a year ago

Thanks. It works now. I really didn't know that a little '-' could make such a problem. Thanks again. :)

Collectives™ on Stack Overflow

AngularJS - ng-model not working with bootstrap directives

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related