title: ng-click and ng-href on the same element
body: <p>I have a list that I am populating via ng-repeat of links.</p>
  
  <p>some of these links need to open as links via ui-router, and some need to open as modals via ui-bootstrap.</p>
  
  <p>This is my Html</p>
  
  <pre><code>&lt;div class="sub-menu"&gt;
    &lt;li ng-repeat="sub in menu track by $index"&gt;
      &lt;a ng-controller="ModalController" ng-click="open(sub.click)" ng-href="#/{{sub.link}}"&gt;
        &lt;i class="fa {{sub.icon}}"&gt;&lt;/i&gt; {{sub.name}} &lt;/a&gt;
    &lt;/li&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the data looks like this:</p>
  
  <pre><code>$scope.menu = [{
      icon: 'fa-plus-square',
      name: 'new',
      click: 'newModal'
  }, {
      icon: 'fa-th-list',
      name: 'list',
      link: 'ui_bootstrap.html'
  }
  </code></pre>
  
  <p>The problem is, that all links are sent to the ModalController, thus the first link opens a modal, but the second one doesn't reload the page.</p>
  
  <p>I tried adding an if to the ModalController as so:</p>
  
  <pre><code>$scope.open = function (link) {
      if (link) {
        var out = $uibModal.open({
          templateUrl: "views/modals/" + link + ".html",
          controller: "ModalInstanceController",
          resolve: {
            items: function () {
              return $scope.items;
            }
          }
        });
        out.result.then(function (value) {
          $scope.selected = value;
        }, function () {
          $log.info("Modal dismissed at: " + new Date);
        });
      };
    }
  </code></pre>
  
  <p>But that still isn't fixing the problem.</p>
  
  <p>Any solution? or better way to do this?</p>