title: Angular scope variables and normal controller variables
body: <p>I have two sets of code like the following</p>
  
  <p><strong>First set of Code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app=angular.module('demo', []);
  app.controller('mainController',function(){
       this.myVar='hai';
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"&gt;&lt;/script&gt;
  &lt;html ng-app="demo"&gt;
  &lt;div ng-controller="mainController as mainControl"&gt;
    &lt;p&gt;{{mainControl.myVar}}&lt;/p&gt;
  &lt;/div&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Second Set of Code:</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('demo', []);
  app.controller('mainController', ['$scope',
    function($scope) {
      $scope.myVar = 'hai';
    }
  ]);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;html ng-app="demo"&gt;
  &lt;div ng-controller="mainController"&gt;
    &lt;p&gt;{{myVar}}&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I want to know the difference between this two way of declaring models to the view. Can some one please explain. I am new to Angular JS</p>