title: AngularJS scope property undefined
body: <p>I am new to AngularJS and I'm trying to understand how it manages the scope. I may be describing some of the concepts inappropriately below but, according to the documentation, <code>$scope</code> is an object that refers to the application model. If I create a simple HTML element such as </p>
  
  <pre><code>&lt;div data-ng-controller="MyController"&gt;       
   &lt;input type="text" data-ng-model="username"&gt;     
  &lt;/div&gt;
  </code></pre>
  
  <p>Which specifies the <code>data-ng-model</code> directive and populates the "application model" (scope) with a property "username" which (I believe) is a reference to the HTML element input. When I try to log the value of username in my controller code I get undefined. Why is it undefined? Does AngularJS not create the variable "username" and add it to the scope object </p>
  
  <p>My controller code is like this:</p>
  
  <pre><code>angular.module('scopeExample', [])
  .controller('MyController', ['$scope', $log, function($scope, $log) {
   $log.log($scope.username) // produces undefined     
  }]); 
  </code></pre>
  
  <p>When I add the username property to the scope in the controller, the property gets defined and there are no issues i.e.</p>
  
  <pre><code>angular.module('scopeExample', [])
  .controller('MyController', ['$scope', $log, function($scope, $log) {
  $scope.username = ''; // no problem 
  $log.log($scope.username) // produces undefined     
  }]); 
  </code></pre>
  
  <p>Can someone explain this to me, I've been searching for a while and I'm getting confused by it all. Also if I've mislabeled some of the concepts in my description I would be grateful if you also correct me.</p>