angularjs: vm is undefined, when using contronllerAs syntax in directive
<p>I can not access the vm.screensize property from the relevant controller. The error I am receiving is the vm is not defined. Below are the directive and controller.</p>

<pre><code>    angular.module('app.ain.directives')
.directive('ainProjectWizardExplanations', function() {
    return {
        restrict: 'E',
        bindToController: true,
        scope : {
            sidenavHidden : '='
        },
        controller: 'ProjectWizardExplanationsController as vm',
        templateUrl: function() {
          console.log(vm.screensize, vm.animate);
            if(vm.screensize) {
                return 'app/ain/shared/directives/projectWizardExplanationsMobile.html';
            }else {
                return 'app/ain/shared/directives/projectWizardExplanations.html';
            }
        }
    };
});


    //controller
angular
        .module('app.ain.directives')
        .controller('ProjectWizardExplanationsController', ProjectWizardExplanationsController);

    function ProjectWizardExplanationsController($mdMedia,$scope,$rootScope, $timeout) {
                var vm = this;
                vm.animate = true;
                $scope.$watch(function() { return $mdMedia('sm'); }, function(small) {
                    vm.screensize = small;
                });
        }
</code></pre>