AngularJS - List items and open item details in bootstrap modal using ui router

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script data-require="angular.js@1.2.22" data-semver="1.2.22" src="https://code.angularjs.org/1.2.22/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <script data-require="angular-ui-router@*" data-semver="0.2.10" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="accountsCtrl as vm">
    <h1>Accounts</h1>
    <table class="table table-striped table-condensed">
      <thead>
        <tr>
          <th>Name</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="a in vm.accounts">
          <td>{{a.name}}</td>
          <td>
            <button class="btn btn-info" ui-sref="promote({id: a.id})" data-toggle="modal" data-target="#myModal">Promote</button>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">×</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Account</h4>
          </div>
          <div class="modal-body">
            <div ui-view=""></div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
  </body>

</html>

// app.js
(function(){
  angular.module('app', ['ui.router']);  
})();


// states.js
(function(){
  
  angular.module('app').config(['$stateProvider', stateConfig]);
  
  function stateConfig($stateProvider){
    $stateProvider.state('promote', {
      params: ['id'],
      controller: 'promoteAccountCtrl',
      templateUrl: 'promote.html'
    });
  }
})();


// accountsCtrl.js
(function(){
  angular.module('app').controller('accountsCtrl', 
    ['accountService', accountsCtrl]);

  function accountsCtrl(accountService){
    var vm = this;
    vm.accounts = [];
    
    initialize();
    
    function initialize(){
      getAccounts();
    }
    
    function getAccounts(){
      vm.accounts = accountService.getAccounts();
    }
  }
})();


// promoteAccountCtrl.js
(function(){
  angular.module('app').controller('promoteAccountCtrl', 
    ['$stateParams', 'accountService', promoteAccountCtrl]);
  
  function promoteAccountCtrl($stateParams, accountService){
    var vm = this;
    vm.account = {};
    
    initialize();
    
    function initialize(){
      getAccount();
    }
    
    function getAccount(){
      var acctId = $stateParams.id;
      vm.account = accountService.getAccounts().filter(function(a){
        return a.id == acctId;
      })[0];
    }
  }
})();


// accountService.js
(function(){
  angular.module('app').service('accountService', accountService);
  
  function accountService(){
    this.getAccounts = getAccounts;
    
    function getAccounts(){
      return [
        {id:1, name:'Smith Inc.'},
        {id:2, name:'Software Co'},
        {id:3, name:'Grocery Plus'}
      ];
    }
  }
})();

This is a simple demo that uses angular ui routing and the standalone bootstrap ui to open a detail modal from a list of objects.  
This follows the angular style guide by John Papa https://github.com/johnpapa/angularjs-styleguide

<div ng-controller="promoteAccountCtrl as vm">
  <strong>{{vm.account.name}}</strong>
</div>