title: Bind javascript method in Angularjs template
body: <p>My application is using Angularjs at client side. I have five directive which are using same logic. Following are required details of my code</p>
  
  <ol>
  <li><p>I have one pure javascript class as AppUtilities.js having following method defined</p>
  
  <pre><code>var AppUtilities = {
    //Get the guid for given collection
    getGUID: function (collectionName) {
        var prefix;
        var guid;
        //get first two character
        if (!Utilities.isEmpty(collectionName)) {
           prefix = collectionName.substring(0, 2);
           //Get timestamp
           var timestamp = Utilities.getTimestampId();
           //concate prefix to get the guid
           guid = prefix + timestamp;
        }
        return guid;
    }
  };
  </code></pre></li>
  <li><p>I have five different directive in which I need to use "getGUID()" method to bind with template. Since template is only able to bind with scope function therefore I have defined scope method in all these five template as below</p>
  
  <pre><code>scope.getGUID = function (collectionName) {
    return AppUtilities.getGUID(collectionName);
  }
  </code></pre></li>
  <li><p>Then in all the five directive template, this method is bind as scope variable</p>
  
  <pre><code>&lt;h4 class="guid" id="guid" data-ng-bind-template="{{getGUID('goal')}}"&gt;&lt;/h4&gt;
  </code></pre></li>
  </ol>
  
  <p>How can I avoid declaring these method as scope variable and directly use as <code>AppUtilities.getGUID(collectionName)</code> in the HTML template?</p>