title: Unable to inject service
body: <p>I don't get any errors thrown, so I don't know what is wrong with my code. When I open my index.html in the browser I don't see the score.</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
   &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;My HTML File&lt;/title&gt;
    &lt;link rel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
    &lt;script 
      src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"&gt; 
    &lt;/script&gt;
    &lt;script 
      src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.js"&gt;&lt;/script&gt;
    &lt;script src = "app.js"&gt;&lt;/script&gt;
   &lt;/head&gt;
   &lt;body ng-app = "app"&gt;
    &lt;p ng-controller="ScoreController"&gt;
       Score: {{score.points}}
    &lt;/p&gt;
    &lt;p ng-controller="ScoreController"&gt;
       &lt;button ng-click="increment()"&gt;Increment&lt;/button&gt;
    &lt;/p&gt;
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js:</p>
  
  <pre><code>angular.module('app', [])
   .value('randomScore', function(){
     return Math.ceil(Math.random() * 10);
  });
  
  angular.module('app').controller('ScoreController', ['randomScore', function 
   ($scope, score, randomScore){
     $scope.score = score;
     $scope.increment = function(){
     $scope.score.points += randomScore();
          };
  }]);
  </code></pre>
  
  <p>index.html-screenshot
  <a href="https://i.stack.imgur.com/1vdLg.png" rel="nofollow noreferrer">!image<a href="https://i.stack.imgur.com/1vdLg.png" rel="nofollow noreferrer">1</a></a></p>