angularjs - using ui.bootstrap in angular js application -

i working on angular application, requires table paginated. have tried using dir-pagination michael bromley didn't work out when tried use angular.module('myapp', ['angularutils.directives.dirpagination']); tried using ui.bootstrap did'nt work out either. in fact leaving empty square brackets causing blank page. without square brackets app working fine.

i have gone through , found similar problem (angular gives blank page when use ui.bootstrap in controller) didn't find solve issue.

i haven't yet coded pagination, should easy enough! real problem not able understand why getting blank page.

however tried using dir-pagination , ui.bootstrap on app single page , controller , working fine. need use these directives on complex app multiple pages , controllers.

this code causing trouble.

var app = angular.module('myapp', ['ui.bootstrap']);  app.controller('myctrl',function ($scope) {     $scope.users = [{ "id": 1, "first_name": "heather", "last_name": "bell", "hobby": "eating" },                     { "id": 2, "first_name": "andrea", "last_name": "dean", "hobby": "gaming" },                     { "id": 3, "first_name": "peter", "last_name": "barnes", "hobby": "reading books" },                     { "id": 4, "first_name": "harry", "last_name": "bell", "hobby": "youtubing" },                     { "id": 5, "first_name": "deborah", "last_name": "burns", "hobby": "fishing" },                     { "id": 6, "first_name": "larry", "last_name": "kim", "hobby": "skipping" },                     { "id": 7, "first_name": "jason", "last_name": "wallace", "hobby": "football" },                     { "id": 8, "first_name": "carol", "last_name": "williams", "hobby": "baseball" },                     { "id": 9, "first_name": "samuel", "last_name": "olson", "hobby": "programming" },                     { "id": 10, "first_name": "donna", "last_name": "evans", "hobby": "playing dota" },                     { "id": 11, "first_name": "lois", "last_name": "butler", "hobby": "gaming" },                     { "id": 12, "first_name": "daniel", "last_name": "hill", "hobby": "surfing" },                     { "id": 13, "first_name": "matthew", "last_name": "torres", "hobby": "cycling" },                     { "id": 14, "first_name": "jerry", "last_name": "hernandez", "hobby": "music" },                     { "id": 15, "first_name": "christopher", "last_name": "carpenter", "hobby": "football" },                     { "id": 16, "first_name": "harold", "last_name": "west", "hobby": "gaming" },                     { "id": 17, "first_name": "carol", "last_name": "hicks", "hobby": "youtubing" },                     { "id": 18, "first_name": "bonnie", "last_name": "davis", "hobby": "partying" },                     { "id": 19, "first_name": "nancy", "last_name": "banks", "hobby": "photography" },                     { "id": 20, "first_name": "walter", "last_name": "freeman", "hobby": "tweeting" },                     { "id": 21, "first_name": "louis", "last_name": "gonzales", "hobby": "bloging" },                     { "id": 22, "first_name": "jean", "last_name": "watkins", "hobby": "bloging" },                     { "id": 23, "first_name": "albert", "last_name": "harris", "hobby": "music" },                     { "id": 24, "first_name": "billy", "last_name": "owens", "hobby": "camping" },                     { "id": 25, "first_name": "russell", "last_name": "patterson", "hobby": "singing" }];      $scope.sort = function (keyname) {         $scope.sortkey = keyname;   //set sortkey param passed         $scope.reverse = !$scope.reverse; //if true make false , vice versa     } }); 

i beginner in angularjs , have no idea how solve issue. have gone through few plunkers of them implement single page app.

thanks beforehand responses!