title: AngularJS: Error: Unknown provider
body: <p>Simple thing - works in the jsfiddle but not in my file. I'm trying to add some data to "factory" of the module and then use it within my controllers.
  This is the relevant code:</p>
  
  <pre><code>var challengesApp = angular.module('challengesApp', []);
  challengesApp.factory('Challenges', function() {
      var challenges = [
          {
              'program': {
                  "num": "1",
                  "name": "aaa"
              },
              'challengeDesc': "desss",
              'items': [
                  {title:"aaa",
                      desc:"bbb",
                      link: "www.google.com",
                      fiction: true},
              ]
          }
      ];
      return challenges;
  
  });
  
  
  function ChallengeCtrl($scope, Challenges) {
      $scope.challenges = Challenges;
      etc...
  }
  
  function ChallengeListCtrl($scope, Challenges) {
      $scope.challenges = Challenges;
      etc..
  }
  </code></pre>
  
  <p>and the HTML:</p>
  
  <pre><code>    &lt;body ng-app="challengesApp"&gt;
          &lt;div ng-controller="ChallengeCtrl"&gt;
              &lt;div id="question"&gt;
                  &lt;h2&gt;{{ challenge.challengeDesc }}&lt;/h2&gt;
                  &lt;ul&gt;
                      &lt;li ng-repeat="item in challenge.items"&gt;
                          &lt;strong&gt;{{ item.title }}&lt;/strong&gt; - {{ item.desc }}
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div ng-controller="ChallengeListCtrl"&gt;
              &lt;div id="programs_list"&gt;
                  &lt;ul&gt;
                      &lt;li ng-repeat="program in challenges | orderBy:orderProp:reverse"&gt;
                          &lt;a href="" ng-click="changeChallenge(program)"&gt;
                          {{ program.program.num }} - {{ program.program.name }}
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  
          &lt;script src="js/main.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  </code></pre>
  
  <p>anything here that I'm missing?</p>