title: How to update variables defined in controller as syntax?
body: <p>The following is the code I am trying:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', []);
  
  var appCtrl = app.controller('AppCtrl', AppCtrl);
  
  function AppCtrl(){
    var appCtrl = this;
    appCtrl.variable = "search";
  }</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;div ng-app = "app"&gt;
    &lt;div ng-controller = "AppCtrl as ctrl1"&gt;
       {{ctrl1.variable}}
    &lt;/div&gt;
    &lt;div ng-controller = "AppCtrl as ctrl2"&gt;
      &lt;input type="search" ng-model = "ctrl2.variable"/&gt;
       {{ctrl2.variable}}
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I update <code>ctrl2.variable</code>, but <code>ctrl1.variable</code> is not updated. </p>
  
  <p>How can I update that without using <code>$scope</code>?</p>