title: Using ui-router with Bootstrap-ui modal
body: <p>I know this has been covered many times and most articles refer to this bit of code: <a href="https://stackoverflow.com/a/21213422/1031184">Modal window with custom URL in AngularJS</a></p>
  
  <p>But I just don't get it. I don't find that to be very clear at all. I also found this <a href="http://jsfiddle.net/sloot/ceWqw/3/" rel="nofollow noreferrer">jsfiddle</a> which was actually great, very helpful except this doesn't add the url and allow for me to use the back button to close the modal.</p>
  
  <hr>
  
  <p>Edit: This is what I need help with.</p>
  
  <p><strong>So let me try explain what I am trying to achieve. I have a form to add a new item, and I have a link 'add new item'. I would like when I click 'add new item' a modal pops up with the form I have created 'add-item.html'. This is a new state so the url changes to /add-item.
  I can fill out the form and then choose to save or close. Close, closes the modal :p (how odd) . But I can also click back to close the modal as well and return to the previous page(state).</strong> 
  <em>I don't need help with Close at this point as I am still struggling with actually getting the modal working.</em></p>
  
  <hr>
  
  <p>This is my code as it stands:</p>
  
  <p>Navigation Controller: <em>(is this even the correct place to put the modal functions?)</em></p>
  
  <pre><code>angular.module('cbuiRouterApp')
    .controller('NavbarCtrl', function ($scope, $location, Auth, $modal) {
      $scope.menu = [{
        'title': 'Home',
        'link': '/'
      }];
  
      $scope.open = function(){
  
          // open modal whithout changing url
          $modal.open({
            templateUrl: 'components/new-item/new-item.html'
          });
  
          // I need to open popup via $state.go or something like this
          $scope.close = function(result){
            $modal.close(result);
          };
        };
  
      $scope.isCollapsed = true;
      $scope.isLoggedIn = Auth.isLoggedIn;
      $scope.isAdmin = Auth.isAdmin;
      $scope.getCurrentUser = Auth.getCurrentUser;
  
      $scope.logout = function() {
        Auth.logout();
        $location.path('/login');
      };
  
      $scope.isActive = function(route) {
        return route === $location.path();
      };
    });
  </code></pre>
  
  <p>This is how I am activating the modal:</p>
  
  <pre><code> &lt;li ng-show='isLoggedIn()' ng-class='{active: isActive("/new-item")}'&gt;
     &lt;a href='javascript: void 0;' ng-click='open()'&gt;New Item&lt;/a&gt;
   &lt;/li&gt;
  </code></pre>
  
  <p>new-item.html:</p>
  
  <pre><code>&lt;div class="modal-header"&gt;
    &lt;h3 class="modal-title"&gt;I'm a modal!&lt;/h3&gt;
  &lt;/div&gt;
  &lt;div class="modal-body"&gt;
    &lt;ul&gt;
      &lt;li ng-repeat="item in items"&gt;&lt;a ng-click="selected.item = item"&gt;{{ item }}&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;Selected:&lt;b&gt;{{ selected.item }}&lt;/b&gt;
  &lt;/div&gt;
  &lt;div class="modal-footer"&gt;
    &lt;button ng-click="ok()" class="btn btn-primary"&gt;OK&lt;/button&gt;
    &lt;button ng-click="close()" class="btn btn-primary"&gt;OK&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Also whilst this does open a modal it doesn't close it as I couldn't work that out.</p>