title: Angular-timer siddii
body: <p>in my web app (which is with angularJs in the front part and with Symfony2 in the back part) i need to integrate a timer (count down of a quizzer) i found this timer <a href="https://github.com/siddii/angular-timer" rel="nofollow">https://github.com/siddii/angular-timer</a> on  github and it seems to be cool but i don't the integration in my webapp works but when i try to start the counter on an event (button click) it don't works, in fact i tried this script:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;AngularJS Example - Single Timer Example&lt;/title&gt;
  &lt;script src="../angular/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="../app/js/timer.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      angular.module('MyApp', ['timer']);
      function MyAppController($scope) {
          $scope.timerRunning = true;
  
          $scope.startTimer = function (){
              $scope.$broadcast('timer-start');
              $scope.timerRunning = true;
          };
  
          $scope.stopTimer = function (){
              $scope.$broadcast('timer-stop');
              $scope.timerRunning = false;
          };
  
          $scope.$on('timer-stopped', function (event, data){
              console.log('Timer Stopped - data = ', data);
          });
      }
      MyAppController.$inject = ['$scope'];
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app="MyApp"&gt;
      &lt;div ng-controller="MyAppController"&gt;
      &lt;h1&gt;AngularJS - Single Timer Example&lt;/h1&gt;
      &lt;h3&gt;&lt;timer/&gt;&lt;/h3&gt;
      &lt;button ng-click="startTimer()" ng-disabled="timerRunning"&gt;Start   Timer&lt;/button&gt;
      &lt;button ng-click="stopTimer()" ng-disabled="!timerRunning"&gt;Stop Timer&lt;/button&gt;
      &lt;/div&gt;
      &lt;br/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and i got this error:</p>
  
  <pre><code>Argument 'MyAppController' is not a function, got undefined
  </code></pre>
  
  <p>any one can help me plz ? </p>
  
  <p>after some changes the my code becomes : </p>
  
  <pre><code>   &lt;!DOCTYPE html&gt;
  &lt;html&gt;
   &lt;head&gt;
     &lt;title&gt;AngularJS Example - Single Timer Example&lt;/title&gt;
      &lt;script src="../angular/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="../app/js/timer.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        var myApp =  angular.module('myApp', ['timer']);
          myApp.controller('MyAppController', ['$scope', function ($scope) 
  
      {
          $scope.timerRunning = true;
  
          $scope.startTimer = function (){
              $scope.$broadcast('timer-start');
              $scope.timerRunning = true;
      };
  
      $scope.stopTimer = function (){
          $scope.$broadcast('timer-stop');
          $scope.timerRunning = false;
      };
  
      $scope.$on('timer-stopped', function (event, data){
          console.log('Timer Stopped - data = ', data);
      });
  }]).$inject = ['$scope'];
  
   &lt;/script&gt;
   &lt;/head&gt;
   &lt;body ng-app="myApp"&gt;
  &lt;div ng-controller="MyAppController"&gt;
  &lt;h1&gt;AngularJS - Single Timer Example&lt;/h1&gt;
  &lt;h3&gt;&lt;timer/&gt;&lt;/h3&gt;
  &lt;button ng-click="startTimer()" ng-disabled="timerRunning"&gt;Start   Timer&lt;/button&gt;
  &lt;button ng-click="stopTimer()" ng-disabled="!timerRunning"&gt;Stop Timer&lt;/button&gt;
  &lt;/div&gt;
    &lt;br/&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>and i'm getting this beauty :/ </p>
  
  <pre><code>Unknown provider: I18nServiceProvider &lt;- I18nService
  </code></pre>