title: Call function of directive inside another directive
body: <p>I want to make a Calendar so i want to have a Calender directive with multipe Event directives in it and calendar should manage those. i am not that familar with angular, so i think i do something totally wrong. In Polymer something like that should work.</p>
  
  <p>Actually i handle directives somewhat like objects but i think i can't call methods like that. Could someone give me an example of how to manage multiple directives within another or if that is not meant to be possible;</p>
  
  <p>Currently i am getting event.start() is not a function.</p>
  
  <h2><a href="http://plnkr.co/edit/cVvA5aYzWSU4ym4HUMcX?p=preview" rel="nofollow">plunker</a></h2>
  
  <pre><code>angular.module("Calendar").directive('calevent',[function(){
  function link(scope,element,attrs){
  
      scope.start = new Date(scope.start);
      scope.end = new Date(scope.end);
      scope.height = Math.round((((end-start)% 86400000) % 3600000) / 60000)/60*20;
      element[0].querySelector(".event").style.height = height + "px";
      var d = new Date();
      d.setHours(0,0,0,0);
      element[0].querySelector(".event").style.top = (Math.round((((start.getTime()-d.getTime())% 86400000) % 3600000) / 60000)/60*20) + "px";
  
      function updateProgress(){
          var cur = new Date();
          var diff = (cur.getTime()-start.getTime())/ (end.getTime()-start.getTime())
          diff = (diff &lt; 1) ? diff : height;
          element[0].querySelector(".eventProgress").style.height =  (height*diff) + "px";
      }
  
      function start(){
          return start;
      }
  
      function end(){
          return end;
      }
  }
  
  return  {
      restrict:'E',
      replace:true,
      scope:{
          text:"=",
          start:"=",
          end:"=",
      },
      templateUrl:'event.html',
      link:link
  }
  }]);
  </code></pre>
  
  <p>I want to call updateProgress() for a specific event from EventCalendar directive</p>