(function () { angular.module('myApp.services', ['ngResource', 'ngAnimate']); angular.module('myApp.controllers', []); angular.module('myApp.directives', []); var myApp = angular.module('myApp', [ 'myApp.services', 'myApp.controllers', 'myApp.directives', 'ngSanitize', 'ui.bootstrap', 'ui.router', 'ui']); var state1Ctrl = function ($filter) { var vm = this, createRows = function (numRows) { vm.tableRows.length = 0; for (var i = 0; i < numRows; i++) { vm.tableRows.push({ col1: i, col2: i, col3: i, col4: i, col5: i, col6: i }); }; }, numRowsChanged = function () { if (vm.numRows > 100) { vm.numRows = 100; } createRows(vm.numRows); }, init = function () { vm.numRows = 100; vm.tableRows = []; createRows(vm.numRows); vm.numRowsChanged = numRowsChanged; } init(); }; state1Ctrl.$inject = ['$filter']; angular.module('myApp.controllers') .controller('state1Ctrl', state1Ctrl); myApp.config(['$locationProvider', '$stateProvider', '$urlRouterProvider', function ($locationProvider, $stateProvider, $urlRouterProvider) { $locationProvider.html5Mode(false); $urlRouterProvider.when('/', '/state1') .otherwise("/state1"); $stateProvider.state('app', { abstract: true, url: '/', views: { 'main': { template: '<div ui-view>/div>' } } }) .state('app.state1', { url: 'state1', templateUrl: 'state1.html', controller: 'state1Ctrl', controllerAs: 'vm', reloadOnSearch: false }) }]); myApp.run(['$log', function ($log) { $log.log("Start."); }]); })()
<div ui-view="main"></div> <script type="text/ng-template" id="state1.html"> <div class="container-fluid"> <div class="form-group"> <label>Num Rows (max of 100)</label> <input ng-model="vm.numRows" ng-change="vm.numRowsChanged()" /> </div> <div class="row"> <button class="btn btn-default">Button1</button> <button class="btn btn-default">Button2</button> <button class="btn btn-default">Button3</button> <button class="btn btn-default">Button4</button> <button class="btn btn-default">Button5</button> </div> <div class="row flex-scroll-content"> <table class="table table-striped table-hover"> <thead> <tr> <th>Col1</th> <th>Col2</th> <th>Col3</th> <th>Col4</th> <th>Col5</th> <th>Col6</th> </tr> </thead> <tbody> <tr ng-repeat="r in vm.tableRows track by $index"> <td ng-bind="r.col1" /> <td ng-bind="r.col2" /> <td ng-bind="r.col3" /> <td ng-bind="r.col4" /> <td ng-bind="r.col5" /> <td ng-bind="r.col6" /> </tr> </tbody> </table> </div> <div class="row flex-buttons"> <button class="btn btn-default">Button1</button> <button class="btn btn-default">Button2</button> <button class="btn btn-default">Button3</button> <button class="btn btn-default">Button4</button> <button class="btn btn-default">Button5</button> </div> </div> </script>