title: Can't get pusher to work with angular
body: <p>I am trying to use pusher and angular together to hit an api over and over again. Sometimes it works and sometimes its doesn't. I am really not sure why.</p>
  
  <p>This is my app.js and html. If anyone can see why it wouldn't be working all the time that would be super helpful! Thank you. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var exampleApp = angular.module('starter', ['ionic', 'pusher-angular'])
  
  exampleApp.run(function($ionicPlatform) {
    $ionicPlatform.ready(function() {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      if(window.cordova &amp;&amp; window.cordova.plugins.Keyboard) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      if(window.StatusBar) {
        StatusBar.styleDefault();
      }
    });
  })
  
  
  exampleApp.controller('MyCtrl', ['$scope', '$http', '$pusher', function($scope, $http, $pusher){
  //d5e0d23678bdda79bd04
  //fa15651bc1ad6c916fc7
    var client = new Pusher('d5e0d23678bdda79bd04');
    var pusher = $pusher(client);
    var issChannel = pusher.subscribe('iss-channel');
  
    // $scope.path = []
  
    // $http.get('/api/location').success(function(data){
    //   $scope.iss = data;
    // });
  
    issChannel.bind('new-location', function(data){
      console.log("Receiving event...")
      console.log(data);
      // $scope.iss = data
      // $scope.path.push([$scope.iss.iss_position.latitude, $scope.iss.iss_position.longitude])
    });
  
  
  }]);
  exampleApp.controller('MapController', function($scope, $ionicLoading) {
   
      google.maps.event.addDomListener(window, 'load', function() {
          var myLatlng = new google.maps.LatLng(37.3000, -120.4833);
   
          var mapOptions = {
              center: myLatlng,
              zoom: 16,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          };
   
          var map = new google.maps.Map(document.getElementById("map"), mapOptions);
   
          navigator.geolocation.getCurrentPosition(function(pos) {
              map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
              var myLocation = new google.maps.Marker({
                  position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude),
                  map: map,
                  title: "My Location"
              });
          });
   
          $scope.map = map;
      });
   
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;link href="lib/ionic/css/ionic.css" rel="stylesheet"&gt;
          &lt;link href="css/style.css" rel="stylesheet"&gt;
          &lt;script src="lib/ionic/js/ionic.bundle.js"&gt;&lt;/script&gt;
          &lt;!-- Jquery --&gt;
          &lt;script src="http://code.jquery.com/jquery-1.7.min.js"&gt;&lt;/script&gt;
          &lt;!-- AngularJS --&gt;
         &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.0/angular.min.js"&gt;&lt;/script&gt;
          
          &lt;!-- pusher-js --&gt;
          &lt;script src="//js.pusher.com/3.0/pusher.min.js"&gt;&lt;/script&gt;
  
          &lt;!-- pusher-angular --&gt;
          &lt;script src="//cdn.jsdelivr.net/angular.pusher/latest/pusher-angular.min.js"&gt;&lt;/script&gt;
          
          &lt;script src="cordova.js"&gt;&lt;/script&gt;
          &lt;script src="js/app.js"&gt;&lt;/script&gt;
  
          &lt;!-- pusher for bower --&gt;
        &lt;!--  &lt;script src="bower_components/dist/pusher.min.js"&gt;&lt;/script&gt; --&gt;
          &lt;script&gt;
          var pusher = new Pusher("d5e0d23678bdda79bd04");
          pusher.connection.bind('state_change', function() {
              $("#conn_status").text(pusher.connection.state);
          })
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body ng-app="starter"&gt;
          &lt;ion-pane&gt;
              &lt;ion-header-bar class="bar-stable"&gt;
                  &lt;h1 class="title"&gt;ISS TRACKER&lt;/h1&gt;
              &lt;/ion-header-bar&gt;
              
              &lt;ion-content ng-controller="MapController"&gt;
                  &lt;div id="map" data-tap-disabled="true"&gt;&lt;/div&gt;
                    
                  &lt;div ng-controller="MyCtrl"&gt;
                    latitude: {{ iss.iss_position.latitude }}&lt;br&gt;
                    longitude: {{ iss.iss_position.longitude }}
                   &lt;/div&gt; 
                   &lt;div&gt;Connection status: &lt;span id="conn_status"&gt;&lt;/span&gt;&lt;/div&gt;
                   
  
  
              &lt;/ion-content&gt;
              
          &lt;/ion-pane&gt;
          &lt;script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyASrLsi0TLN7GvfLzx0lX5rEwQfNzIj5gQ&amp;sensor=true"&gt;&lt;/script&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>