AngularJS - following ng-idle example but getting an error

Time to get some help because this the 3rd day that I'm trying to figure out what I'm missing

1. I'm following this example ng-idle example
I found other examples as well and this is another Another example

2. You can see it here. I have the "start demo" button on the front page
http://147.75.0.124:88/

3. In module.js, I have this. I step thru it and I see 'Idle' is defined

(function() {
    'use strict';

    angular.module('lawApp', ['ui.bootstrap', 'ngIdle'])
    .config(["IdleProvider", "KeepaliveProvider", function (IdleProvider, KeepaliveProvider) {
        IdleProvider.idle(5);
        IdleProvider.timeout(5);
        KeepaliveProvider.interval(10);
    }])
        .run(['Idle', function (Idle) {
        Idle.watch();
    }]); //['ui.bootstrap']  I moved this to login page and it works fine. Having it here and not having it in the login page also works

  
})();

Select allOpen in new window

4. I put the rest of the code from the demo in logincontroller.js

 function loginController($scope, loginService, $uibModal,Idle,Keepalive)
   {
       .....

            //*** idle

       $scope.started = false;

       function closeModals() {
           if ($scope.warning) {
               $scope.warning.close();
               $scope.warning = null;
           }

           if ($scope.timedout) {
               $scope.timedout.close();
               $scope.timedout = null;
           }
       }

       $scope.$on('IdleStart', function () {
           closeModals();

           $scope.warning = $uibModal.open({
               templateUrl: 'warning-dialog.html',
               windowClass: 'modal-warning'
           });
       });

       $scope.$on('IdleEnd', function () {
           closeModals();
       });

       $scope.$on('IdleTimeout', function () {
           closeModals();
           $scope.timedout = $uibModal.open({
               templateUrl: 'timedout-dialog.html',
               windowClass: 'modal-danger'
           });
       });

       $scope.start = function () {
           console.log('start');
           closeModals();
           Idle.watch();
           $scope.started = true;
       };

       $scope.stop = function () {
           console.log('stop');
           closeModals();
           Idle.unwatch();
           $scope.started = false;

       };
       //*** end of idle
   }

Select allOpen in new window

This is what happens

1. When page is loaded, I get the "timeout" message after 5 seconds. Why is this? in the demo, you have to click on the button

2. Click on the button and you can see the error in Console. "Idle" is not defined. Why is this?

I don't know what I'm missing. I read about $rootScope and not sure if I need that. Found other examples as well but still don't know what I'm missing