title: Why the code in controller are called twice?
body: <p>There is the following code in the html file <code>templates\events.html</code>.</p>
  
  <pre><code>&lt;div class="events-2colmn-l backgnd-cover" ui-sref="menu.music"&gt;
      MUSIC
  &lt;/div&gt;
  </code></pre>
  
  <p>In route.js</p>
  
  <pre><code>  .state('menu.music', {
      url: '/music',
      views: {
        'side-menu21': {
          templateUrl: 'templates/music.html',
          controller: 'musicCtrl'
        }
      }
    })
  </code></pre>
  
  <p>And in the controller there is</p>
  
  <pre><code>.controller('musicCtrl', function ($scope, EventService) { // called twice when clicked
      var allEvents = EventService.query({ category: "Music" });
      allEvents.$promise.then(function (response) { 
          $scope.events = response;  
      });
  })
  </code></pre>
  
  <p>The code in the controller is always called twice when the <code>&lt;div ...&gt;MUSIC&lt;/div&gt;</code> is touched. How to make sure it's only called once when clicked?</p>