angular.module('grant.app', ['ui.router.grant'])

.config( function($stateProvider, $urlRouterProvider) {
  
  $urlRouterProvider.otherwise('/home');
  
  $stateProvider
  
    // HOME (anyone can access)
    .state('home', {
      url: '/home',
      templateUrl: 'partial-home.html'
    })
    
    // HOUSE OF STARK (only Starks can access)
    .state('starks', {
      url: '/house-of-stark',
      templateUrl: 'partial-starks.html',
      controller: function($scope, animal) {
        $scope.animal = animal;
      },
      resolve: {
  	    animal: function(grant) {
          return grant.only({test: 'stark', state: 	'denied'});
  	    }
      }
    })
    
    // HOUSE OF LANNISTER (only Lannisters can access)
    .state('lannister', {
      url: '/house-of-lannister',
      templateUrl: 'partial-lannister.html',
      controller: function($scope, animal) {
        $scope.animal = animal;
      },
      resolve: {
  	    animal: function(grant) {
          return grant.only({test: 'lannister', state: 	'denied'});
  	    }
      }
    })
    
    // HOUSE OF TARGARYEN (only Targaryens can access)
    .state('targaryen', {
      url: '/house-of-targaryen',
      templateUrl: 'partial-targaryen.html',
      controller: function($scope, animal) {
        $scope.animal = animal;
      },
      resolve: {
  	    animal: function(grant) {
          return grant.only({test: 'targaryen', state: 	'denied'});
  	    }
      }
    })
    
    // DENIED (state for failed permissions)
    .state('denied', {
      url: '/denied',
      templateUrl: 'partial-denied.html'
    })
})

.run(function(grant, houseService) {
  grant.addTest('stark', function() {
    return houseService.isStark();
  });
  
  grant.addTest('lannister', function() {
    return houseService.isLannister();
  });

  grant.addTest('targaryen', function() {
    return houseService.isTargaryen();
  });
  
  grant.addTest('got', function() {
    return houseService.isGameOfThrones();
  });
  
  
})

.controller('AppController', function($state, houseService) {
  var vm = this;
  
  vm.character = undefined;
  vm.selectHouse = _selectHouse;
  vm.signout = _signout;
  
  function _selectHouse(house, character) {
    houseService.setHouse(house);
    vm.character = character;
    $state.reload();
  }
  
  function _signout() {
    vm.character = undefined;
    houseService.setHouse(undefined);
    $state.reload();
  }
})

.factory('houseService', function($http) {
  var whichHouse;
  
  return {
    setHouse: function(house) {
      whichHouse = house;
    },
    isStark: function() {
      return (whichHouse === 'stark') ? 'Dire Wolf' : false;
    },
    isLannister: function() {
      return (whichHouse === 'lannister') ? 'Lion' : false;
    },
    isTargaryen: function() {
      return (whichHouse === 'targaryen') ? 'Dragon' : false;
    }
  };
})


<!DOCTYPE html>
<html>

<head>
  <title>Grant of Thrones</title>

  <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
  <link href="app.css" rel='stylesheet' type='text/css'>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.12/angular.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js" type="text/javascript" charset="utf-8"></script>
  <script src="https://cdn.rawgit.com/ryandrewjohnson/ui-router.grant/master/src/grant.js" type="text/javascript" charset="utf-8"></script>
  <script src="app.js" type="text/javascript" charset="utf-8"></script>
</head>

<body ng-app="grant.app" ng-controller="AppController as app">

  <nav class="navbar navbar-inverse">
    <a class="navbar-brand" ui-sref="home">Grant of Thrones</a>
  </nav>
  
  <div class="container">
    
    <div class="row center-block" ng-if="app.character">
      
      <h2 class="text-center">Welcome <span>{{app.character}}</span></h2>
      <button class="btn btn-danger center-block" ng-click="app.signout()">Sign Out</button>
    
    </div>
    
    <div class="row" ng-if="!app.character">
      
      <div class="col-xs-4 col-md-4 got-role">
        <img src="http://www.alfabetajuega.com/multimedia/imagenes/201408/77357.ned_stark.jpg" class="img-thumbnail">
        <label>Ned Stark</label>
        <button ng-click="app.selectHouse('stark', 'Ned Stark')" type="button" class="btn btn-primary btn-block">Select</button>
      </div>
    
      <div class="col-xs-4 col-md-4 got-role">
        <img src="http://www.yareah.com/wp-content/uploads/2015/03/1-1.jpg" class="img-thumbnail">
        <label>Jamie Lannister</label>
        <button ng-click="app.selectHouse('lannister', 'Jamie Lannister')" type="button" class="btn btn-primary btn-block">Select</button>
      </div>
    
      <div class="col-xs-4 col-md-4 got-role">
        <img src="http://fantasticfangirls.org/wp-content/uploads/2013/02/dany.png" class="img-thumbnail">
        <label>Daenerys Targaryen</label>
        <button ng-click="app.selectHouse('targaryen', 'Daenerys Targaryen')" type="button" class="btn btn-primary btn-block">Select</button>
      </div>
    
    </div>
    
  </div>
  
  <div class="main-content" ui-view></div>


</body>

</html>
.got-role,
.got-house {
  text-align: center;  
}

.got-role label,
.got-house label {
  font-size: 16px;
  display: block;
}

.got-role img,
.got-house img {
  width: 100%;
  height: 50%;
}

.got-house button {
  margin-top: 10px;
}

.main-content {
  margin-top: 20px;
}

.jumbotron h2 {
  margin-top: 0;
}
<div class="jumbotron text-center">
    <h2>Available Houses:</h2>
    <div class="container">
      
    <div class="row">
    
      <div class="col-xs-4 col-md-4 got-house">
        <img src="http://fc06.deviantart.net/fs70/i/2012/277/f/d/house_stark_by_montezuma3-d5gr1wa.jpg" class="img-thumbnail">
        <button ui-sref="starks" type="button" class="btn btn-primary btn-block btn-success">House Stark</button>
      </div>
    
      <div class="col-xs-4 col-md-4 got-house">
        <img src="http://fc01.deviantart.net/fs71/i/2012/279/f/9/house_lannister_by_montezuma3-d5gzgcc.jpg" class="img-thumbnail">
        <button ui-sref="lannister" type="button" class="btn btn-primary btn-block btn-success">House Lannister</button>
      </div>
    
      <div class="col-xs-4 col-md-4 got-house">
        <img src="http://fc03.deviantart.net/fs71/i/2012/279/1/9/house_targaryen_by_montezuma3-d5gzbkr.jpg" class="img-thumbnail">
        <button ui-sref="targaryen" type="button" class="btn btn-primary btn-block btn-success">House Targaryen</button>
      </div>
    
    </div>
    
  </div>
  
</div>
<div class="jumbotron text-center">
    
    <h2>Welcome to House Stark</h2>
    <p>Where winter is always coming!</p>
    <p class="bg-primary"><strong>Animal:</strong> {{animal}}</p>
    
    <div class="container">
      
      <div class="row">
      
        <img src="http://cdn.hbowatch.com/wp-content/uploads/2011/12/detail-111228.jpg" class="house-img img-thumbnail" />
        
      </div>
    
    </div>
  
</div>
<div class="jumbotron text-center">
    
    <h2>Welcome to House Lannister</h2>
    <p>Where we always pay our debts!</p>
    <p class="bg-primary"><strong>Animal:</strong> {{animal}}</p>
    
    <div class="container">
      
      
      <div class="row">
        
        <img src="http://img.pandawhale.com/post-30203-Jaime-Lannister-NICE-gif-Imgur-sl2C.gif" class="house-img img-thumbnail" />
    
      </div>
    
    </div>
  
</div>
<div class="jumbotron text-center">
  
    <h2>Welcome to House Targaryen</h2>
    <p>Where winter is always coming!</p>
    <p class="bg-primary"><strong>Animal:</strong> {{animal}}</p>
    
    <div class="container">
      
      <div class="row">
        
        <img src="http://www.quickmeme.com/img/17/1710c24a575438c9038087e9deecfe1edb7361483158e8b38123c1a73db9da63.jpg" class="house-img img-thumbnail" />
    
      </div>
    
    </div>
  
</div>
<div class="jumbotron text-center">
    
    <h2>Access Denied!</h2>
    
    <p>You do not have permission to access this page.</p>
    
    <div class="container">
      
      <div class="row">
        
        <img src="http://media.giphy.com/media/c3LrSypJkaj0A/giphy.gif" class="house-img img-thumbnail" />
    
      </div>
      
      <button ui-sref="home" class="btn btn-danger center-block btn-home">Back to Home</button>
      
    </div>
  
</div>s