title: How to access directive's controller variables in directive's template?
body: <p>Need to use variable (defined inside the <strong>controller</strong> element of directive) in the <strong>template</strong> element.</p>
  
  <hr>
  
  <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>angular.module('home').directive('mediaTile', function(){
   return {
    restrict: "AE",
    replace: 'true',
    scope: {
     media: '=',
     displayFilter: '='
    },
    controller: function($scope){
     var vm = this;
              vm.mediaImageActual = 'img/large-tiles.png';            }
    },
    controllerAs: 'vm',
    template:  '&lt;div&gt;' +
       '&lt;img preload-image ng-src="{{vm.mediaImageActual}}"&gt;' +
       '&lt;/div&gt;'
   };
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div media-tile display-filter="view.displayFilter" media="dataList.lists[0]"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>ng-src is not getting the proper value i.e vm.mediaImageActual.</p>
  
  <p>I have tried online solutions like <a href="http://juristr.com/blog/2015/01/learning-ng-directives-access-scope-controller/" rel="nofollow noreferrer">this</a> but unable to resolve the issue.
  Whats wrong ?</p>