Ng-model undefined in the controller

Question

I am having some "problems" reading an ng-model from the controller.

I want to do this:

<input type="text" ng-model="code">
<button ng-click="setCode()">Login</button>

And in my controller access that variable like this:

 $scope.setCode = function(){
    alert($scope.code);
  }

That is what I want to do but my code variable is undefined.

I found 2 ways to get this to work:

1) Passing the variable as an argument

<input type="text" ng-model="code">
<button ng-click="setCode(code)">Login</button>

and:

$scope.setCode = function(code){
    alert(code);
  }

2) Declaring my variable as an object

<input type="text" ng-model="code.text">
<button ng-click="setCode()">Login</button>

and:

$scope.code = {text: 'foo'};

[...]

$scope.setCode = function(){
    console.log($scope.code);
  }

(I prefer the second one)

But I am a little confused about what I should do. It's ok to declare my ng-models like objects? I have to declare ALL my models like objects?

---

EDIT: Here is a Plnkr of the problem

In this example (I am using the Ionic framework), I declare a variable code with the value test, when I change the model in the input and press the Start button, in theory I have to see in an alert the new value of the model. But what I see is the old one.

Thanks!

Answer 1

I fixed your plnkr example using object model instead of primitive type.

$scope.model = {};
$scope.model.code = "test";

$scope.setCode = function(){
    alert($scope.model.code);
}

See the plnkr.

Answer 2

Your first example is working, here is a plunkr.

If you hit the button without entering any text into the input field you get an alert undefined. $scope.code gets defined the moment you enter something to its bound field ng-model="code".

You could initialize it to a default in your controller too:

$scope.code = 'my default value';