title: scope.$on is not working when created inside a directive
body: <p>I have created a directive for my application which is mentioned in the following question
  <a href="https://stackoverflow.com/questions/16514509/how-do-you-serve-a-file-for-download-with-angularjs-or-javascript">How do you serve a file for download with AngularJS or Javascript?</a> Directive code is as like below </p>
  
  <pre><code>    appModule.directive('fileDownload', function ($compile) {
          var fd = {
              restrict: 'A',
              link: function (scope, iElement, iAttrs) {
  
                  scope.$on("downloadFile", function (e, url) {
                      var iFrame = iElement.find("iframe");
                      if (!(iFrame &amp;&amp; iFrame.length &gt; 0)) {
                          iFrame = $("&lt;iframe style='position:fixed;display:none;top:-1px;left:-1px;'/&gt;");
                          iElement.append(iFrame);
                      }
                      iFrame.attr("src", url);
                  });
              }
          };
          return fd;
      });
  </code></pre>
  
  <p>Here scope.$on is used, when I call this event via $scope.$emit or $scope.$broadcast, it is not working. My controller code is like below</p>
  
  <pre><code>    function reportsController($scope, $http) {
          var self = this;
  
          $scope.$broadcast("downloadFile", 'http://google.com');
          $scope.$emit("downloadFile", 'http://google.com');
      }
  </code></pre>
  
  <p>and my html file is as below</p>
  
  <pre><code>    &lt;div ng-controller="reportsController" id="repctrl"&gt;
          &lt;a file-download&gt;&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>What I am doing wrong here?</p>
  
  <p>@Edit: Added the subscribe ($on) in the compile phase so as to avoid the usage of $timeout in controller. <a href="https://jsfiddle.net/esy4kLm2/5/" rel="nofollow noreferrer">Here</a> you can look the example</p>