Every time I add 'ui.bootstrap' dependency to my Angular module the page renders blank w/o errors

Like the title says each time I add 'ui.bootstrap' to my module dependency my page renders blank with no errors. If I remove it the page renders partially without the accordion menu and date picker.

I had seen this similar StackOverflow problem but adding the html2js to my grunt and <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script> to my index.html didn't fix the problem. Any help would be appreciated.

My index.html

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <base href="/">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title>"Carrepair2"</title>

    <!-- build:css styles/vendor.css -->
    <!-- <link rel="stylesheet" href="vendor/some.contrib.css"> -->
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/ionic/release/css/ionic.css" />
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:css({.tmp,app}) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>

  <body ng-app="Carrepair2" ng-controller="AppCtrl">
    <ion-nav-view></ion-nav-view>


    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

    <!-- build:js scripts/vendor.js -->
    <!-- <script src="vendor/someContribJs.js"></script> -->
    <!-- bower:js -->
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
    <script src="bower_components/ionic/release/js/ionic.js"></script>
    <script src="bower_components/ionic/release/js/ionic-angular.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

    <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers.js"></script>
    <!-- endbuild -->


    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

  </body>
</html>

My app.js routes

'use strict';
angular.module('Carrepair2', ['ionic', 'ui.bootstrap', 'ui.templates'])

.config(function($stateProvider, $urlRouterProvider, $locationProvider) {
  $stateProvider
.state('app', {
  url: '/app',
  abstract: true,
  templateUrl: 'templates/menu.html',
  controller: 'AppCtrl'
})

.state('app.manage', {
  url: '/manage',
  views: {
    'menuContent' :{
      templateUrl: 'templates/manage.html'
    }
  }
})

.state('app.billing', {
  url: '/billing',
  views: {
    'menuContent' :{
      templateUrl: 'templates/billing.html'
    }
  }
})
.state('app.setup', {
  url: '/setup',
  views: {
    'menuContent' :{
      templateUrl: 'templates/setup.html',
      controller: 'SetupCtrl'
    }
  }
});

  $urlRouterProvider.otherwise('/app/manage');

  $locationProvider.html5Mode(true);
});

My template

 <ion-view title="Setup">
  <ion-nav-buttons side="left">
    <button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
  </ion-nav-buttons>
  <ion-content class="has-header">
    <div ng-controller="ShopSetupCtrl">
      <accordion close-others="oneAtATime">

        <accordion-group heading="Resources">
          <h4>Add Your Shop's Resources.</h4>
          <p>Click the 'plus' or 'minus' buttons to set the number of each resource your shop has. When finished click the Add All button.</p>
          <div ng-repeat="resource in resources">
            <img ng-src="{{resource.thumb}}">
            {{resource.description}}
            <div ng-controller="CounterController">
              <button class="val_adjuster ion-minus-circled btn btn-default btn-sm"  ng-click="decrement()"></button>
              {{count}}
              <button class="val_adjuster ion-minus-circled btn btn-default btn-sm"  ng-click="count = count + 1" ng-init="count=0"></button>
            </div>
          </div>
          <button class="btn btn-default btn-sm" ng-click="addItem()">Add All</button>
        </accordion-group>

        <accordion-group heading="Technicians">
          <h4>Add Your Shop's Technicians.</h4>
          <div class="row">
            <input type="text" name="first-name" placeholder="First Name">
            <input type="text" name="last-name" placeholder="Last Name">
            <input type="email" name="email" placeholder="Email">
          </div>
          <div ng-controller="DatePickerCtrl" class="row">
            <div class="col-md-6">
              <p class="input-group">
                <input type="text" placeholder=" Hire Date" class="form-control" datepicker-popup="{{format}}" ng-model="dt" is-open="opened" min-date="minDate" max-date="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
              </p>
            </div>
          </div>
          <h5>Check all held ASE Certifications</h5>
          <ul ng-repeat="certificate in certifications">
            <li class="item item-checkbox">
              {{certificate}}
              <label class="checkbox"></label>
              <input type="checkbox">
            </li>
          </ul>
          <button class="btn btn-default btn-md" ng-click="addTechnician()">Add Technician</button>
        </accordion-group>

        <accordion-group heading="Payment & Billing">
        </accordion-group>

      </accordion>
    </div>

My controllers

 'use strict';
angular.module('Carrepair2.controllers', ['ionic', 'ui.bootstrap', 'ui.templates'])

.controller('AppCtrl', function($ionicPlatform) {
  $ionicPlatform.ready(function() {
  });
})

.controller('ShopSetupCtrl', function($scope) {

  $scope.oneAtATime = true;


  $scope.resources = [
    {'thumb':'http://placekitten.com/50/50','description':'2-Post Surface Mounted'},
    {'thumb':'http://placekitten.com/50/50','description':'4-Post Drive On'},
    {'thumb':'http://placekitten.com/50/50','description':'Parallelogram Drive On'},
    {'thumb':'http://placekitten.com/50/50','description':'Wheel Alignment Rack'},
    {'thumb':'http://placekitten.com/50/50','description':'Single-Post In-Ground'},
    {'thumb':'http://placekitten.com/50/50','description':'2-Post In-Ground'},
    {'thumb':'http://placekitten.com/50/50','description':'Scissor-Lift'},
    {'thumb':'http://placekitten.com/50/50','description':'Flat Bay'}
  ];

  $scope.certifications = [
    'Engine Repair',
    'Automatic Transmission & Transaxle',
    'Manual Drive Train & Axles',
    'Suspension & Steering', 'Brakes',
    'Electrical & Electronic Systems',
    'Heating & Air Conditioning',
    'Engine Performance',
    'Light Vehicle Diesel Engines'
  ];

  $scope.status = {
    isFirstOpen: true,
    isFirstDisabled: false
  };

})

.controller('CounterController', function($scope) {
  $scope.decrement = function() {
    $scope.count = $scope.count - 1;
    if ($scope.count < 0){
      $scope.count = 0;
    }
  };
})

.controller('DatePickerCtrl',function($scope) {
  $scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

  $scope.clear = function () {
    $scope.dt = null;
  };

  // Disable weekend selection
  $scope.disabled = function(date, mode) {
    return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
  };

  $scope.toggleMin = function() {
    $scope.minDate = $scope.minDate ? null : new Date();
  };
  $scope.toggleMin();

  $scope.open = function($event) {
    $event.preventDefault();
    $event.stopPropagation();

    $scope.opened = true;
  };

  $scope.dateOptions = {
    formatYear: 'yy',
    startingDay: 1
  };

  $scope.initDate = new Date('2016-15-20');
  $scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
  $scope.format = $scope.formats[0];
});

I was missing the link to the bootstrap dependency in my index.html head tag.

<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"
  rel="stylesheet">

Without any error messages, and just from looking at the code, my only guess is that you should try including ui bootstrap after including angular. Specifically, put it at the bottom of the <!-- bower:js --> block, above <!---endbower-->. It seems ui bootstrap is trying to initialize before angular is.