title: Cannot access a variable inside controller in angular
body: <p>I am trying to implement a <a href="https://github.com/AllanBishop/angular-img-cropper" rel="nofollow"><strong>Crop Plugin Library</strong></a> in my angular demo project. I have injected the required modules to my main module and successfully cropped a pic. But I don't know how to pass the base64 string to the controller. What I have tried so far is:</p>
  
  <pre><code>var myApp = angular.module('myModule', ['ngRoute', 'angular-img-cropper', 'app']);
  
  myApp.config(function($routeProvider) {
          $routeProvider
              .when('/multiple',{
                      templateUrl: 'templates/multi.html',
                      controller: 'multiController',
                      controllerAs: 'multiCtrl'           
              })
  });
  
  myApp.controller('multiController', function ($scope,$rootScope) {
          var vm = this;
          vm.clickButton = function () {
              console.log("photo: "+vm.member_photo);
          };
  });
  </code></pre>
  
  <p>HTML - templates/multi.html:</p>
  
  <pre><code>&lt;h1&gt;Multi page which has another controller inside&lt;/h1&gt;
  &lt;div ng-controller="multiController"&gt;
      &lt;div ng-controller="ImageCropperCtrl as ctrl"&gt;
      &lt;input type="file" img-cropper-fileread image="cropper.sourceImage"   /&gt;
      &lt;div&gt;
        &lt;canvas width="500" height="300" id="canvas" image-cropper image="cropper.sourceImage" cropped-image="cropper.croppedImage" crop-width="500" crop-height="200" min-width="100" min-height="50" keep-aspect="true" crop-area-bounds="bounds"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
      &lt;div&gt;Cropped Image (Left: {{bounds.left}} Right: {{bounds.right}} Top: {{bounds.top}} Bottom: {{bounds.bottom}})&lt;/div&gt;
      &lt;div ng-show="cropper.croppedImage!=null"&gt;&lt;img ng-model="member_photo1" ng-src="{{cropper.croppedImage}}" /&gt;&lt;/div&gt;
          &lt;textarea name="member_photo" ng-model="multiCtrl.member_photo" id="member_photo" class="form-control valid"&gt;{{cropper.croppedImage}}&lt;/textarea&gt;
      &lt;/div&gt;
    &lt;button ng-controller="insideController" ng-click="multiCtrl.clickButton()"&gt;Console.log&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>If I inspect the textarea the value is there but it is not shown inside the textarea and also the value cannot be accessed inside my controller. What am I doing wrong?</p>