title: Bind custom javascript event to angular
body: <p>I'm working on a mobile application where I have list with some items. This list can be pulled down to inititate a refresh of the list (I'm using iScroll4). I'm now trying to hook this event up to my angular controller so I can make an api call and update the model. </p>
  
  <p>The javascript is basically as follows:</p>
  
  <pre><code>[..] //javascript code to detect the pulldown event
  
  function pullDownAction(){
       //I want to update the scope here
  }
  </code></pre>
  
  <p>Based on what I have read, I need to make an angular directive and call the event from there, but I still haven't figured out where the above piece of code should go.</p>
  
  <p>I have also tried broadcasting the event from within the pullDownAction function and listening to it in the controller, like so:</p>
  
  <pre><code>function pullDownAction(){
      var $rootScope = angular.injector(['ng']).get('$rootScope');
      $rootScope.$apply(function(){
            $rootScope.$broadcast('updateInbox');
      });
  });
  </code></pre>
  
  <p>and then in the controller:</p>
  
  <pre><code>$scope.$on('updateInbox', function(){
       $http.get(apiUrl)
           .success(function (data) {
                $scope.model = data;
          });           
  });
  </code></pre>
  
  <p>But I'm sure I'm missing something important which makes the code not work. I'm quite new to angular, so I haven't really gotten the hang of how directives work yet. </p>