title: AngularJS view not populating
body: <p>I am new to AngularJS and am trying to build a page similar to this example.</p>
  
  <p><a href="http://curran.github.io/screencasts/introToAngular/exampleViewer/#/43" rel="nofollow">http://curran.github.io/screencasts/introToAngular/exampleViewer/#/43</a></p>
  
  <p>The example works if I copy it exactly as it is in the link above but I wish to structure my folder as I have them below. 
  I have tried to fit the example into my file structure shown below and cannot get the <strong><code>lensdetail.html</code></strong> partial to load anything. </p>
  
  <p>The url changes to the correct country name but I cannot figure out why it won't display any of the remaining JSON data?</p>
  
  <p>I have only included the partials/code that is giving me issues. </p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;body class="existence-font" ng-app="rApp"&gt;
    &lt;header&gt;
        &lt;nav class="navbar navbar-default"&gt;
        &lt;div class="container"&gt;
            &lt;div class="navbar-header"&gt;
                &lt;a class="navbar-brand" style="font-size:1em;" href="#/"&gt; &amp;nbsp;&lt;span class="glyphicon glyphicon-home" aria-hidden="true"&gt;&lt;/span&gt;&lt;/a&gt;
            &lt;/div&gt;
  
            &lt;ul class="nav navbar-nav navbar-right"&gt;
                &lt;li&gt;&lt;a href="#/"&gt;&lt;i class="fa fa-home"&gt;&lt;/i&gt; Home&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#/about"&gt;&lt;i class="fa fa-shield"&gt;&lt;/i&gt; About&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#/contact"&gt;&lt;i class="fa fa-comment"&gt;&lt;/i&gt; Contact&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#/m42catalog"&gt;&lt;i class="fa fa-comment"&gt;&lt;/i&gt;m42 Catalog&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
        &lt;/nav&gt;
    &lt;/header&gt; 
  &lt;div ng-view=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="bower_components/jquery/dist/jquery.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/affix.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/alert.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/button.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/carousel.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/collapse.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/dropdown.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tab.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/transition.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/scrollspy.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/modal.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/tooltip.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap/popover.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular-animate/angular-animate.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular-cookies/angular-cookies.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular-resource/angular-resource.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular-route/angular-route.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular-sanitize/angular-sanitize.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular-touch/angular-touch.js"&gt;&lt;/script&gt;
  &lt;script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"&gt;&lt;/script&gt;
  &lt;!-- endbower --&gt;
  &lt;!-- endbuild --&gt;
  
  &lt;!-- build:js({.tmp,app}) scripts/scripts.js --&gt;
  &lt;script src="scripts/app.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/services.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/controllers/home.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/controllers/about.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/controllers/contact.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/controllers/m42Catalog.js"&gt;&lt;/script&gt;
  &lt;script src="scripts/controllers/lensDetail.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>Service.js</strong></p>
  
  <pre><code>angular.module('rAppServices', [ ])
  .factory('countries', function($http) {
  
  function getData(callback){
        $http({
          method: 'GET',
          url: 'data/lenses.json',
          cache: true
        }).success(callback);
      }
  
      return {
        list: getData,
        find: function(lensId, callback){
          getData(function(data) {
            var lens = data.filter(function(entry){
              return entry.lensId === lensId;
            })[0];
            callback(lens);
          });
        }
      };
  });
  </code></pre>
  
  <p><strong>countries.json</strong></p>
  
  <pre><code>[
  {
      "lensId": "1",
      "Mount": "M42",
      "Brand": "SMC Takumar",
      "SMC": "Yes",
      "FL": 15,
      "Aperature": 3.5,
      "Filter": "Built in",
      "Serial": 7727058,
      "Notes": ""
  },
  {
      "lensId": "2",
      "Mount": "M42",
      "Brand": "FISH-EYE-TAKUMAR",
      "SMC": "Yes",
      "FL": 17,
      "Aperature": 4,
      "Filter": "Built in",
      "Serial": 6117744,
      "Notes": ""
  },
  {
      "lensId": "3",
      "Mount": "M42",
      "Brand": "Super Takumar - Asahi Optics Co. ",
      "SMC": "Yes",
      "FL": 20,
      "Aperature": 4.5,
      "Filter": "Tamron 58mm UV",
      "Serial": 3435733,
      "Notes": "Showing signs of wear."
  },
  {
      "lensId": "4",
      "Mount": "M42",
      "Brand": "Carl Zeiss Jena - Flektogon",
      "SMC": "no",
      "FL": 20,
      "Aperature": 4,
      "Filter": "77 m 9 Tiffen Adapter Ring Series 9 USA",
      "Serial": 8281049,
      "Notes": ""
  }
  ]
  </code></pre>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>var rApp = angular.module('rApp',    ['ngRoute','ui.bootstrap','rAppServices'])
  
  
  rApp.config(function ($routeProvider) {
      $routeProvider
          .when('/', {
              templateUrl: 'views/home/home.html',
              controller: 'HomeCtrl'
          })
          .when('/about', {
              templateUrl: 'views/about/about.html',
              controller: 'AboutCtrl'
          })
          .when('/contact', {
              templateUrl: 'views/contact/contact.html',
              controller: 'ContactCtrl'
          })
          .when('/m42catalog', {
              templateUrl: 'views/m42catalog/m42Catalog.html',
              controller: 'M42CatalogCtrl'    
          })
          .when('/:lensId', {
              templateURL: 'views/m42catalog/lensDetail.html',
              controller: 'LensDetailCtrl'
          })
          .otherwise({
              redirectTo: '/'
          });
  });
  </code></pre>
  
  <p><strong>m42catalogctrl.js</strong></p>
  
  <pre><code>angular.module("rApp")
  .controller("M42CatalogCtrl", ['$scope', 'Lenses', function ($scope, Lenses) {
      Lenses.list(function(LensesData) {
          $scope.lenses = LensesData; 
      });
  
  $scope.orderLens= '';
  }]);
  </code></pre>
  
  <p><strong>m42catalog.html</strong></p>
  
  <pre><code>        &lt;section&gt;
           &lt;ul class="list-unstyled"&gt;
                  &lt;li ng-repeat="lens in lenses | filter: query | orderBy:orderLens" class="thumbnail"&gt;
                      [{{$index + 1}}] &lt;a href="#/m42catalog/{{lens.lensId}}"&gt;{{lens.Brand}}&lt;/a&gt; - {{lens.Mount}} Mount - S.M.C: {{lens.SMC}} 
                      &lt;ul class="list-unstyled"&gt;       
                          &lt;li&gt;Focal Length (mm): {{lens.FL}}&lt;/li&gt; 
                          &lt;li&gt;Aperature: {{lens.Aperature}}&lt;/li&gt;
                          &lt;li&gt;Filter on Lens: {{lens.Filter}}&lt;/li&gt;
                          &lt;li&gt;Serial #: {{lens.Serial}}&lt;/li&gt; 
                          &lt;li&gt;Notes: {{lens.Notes}}&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/section&gt;
  </code></pre>
  
  <p><strong>lensdetailctrl.js</strong></p>
  
  <pre><code>angular.module('rApp')
  .controller('LensDetailCtrl', ['$scope', '$routeParams', 'Lenses' function($scope, $routeParams, Lenses) {
          Lenses.find($routeParams.lensId, function(LensData) {
          $scope.lens = LensData;
      });
  }]);
  </code></pre>
  
  <p><strong>lensDetail.html</strong></p>
  
  <pre><code>&lt;section&gt;
    &lt;h1&gt;{{lens.lensId}}&lt;/h1&gt;
      &lt;ul&gt;
        &lt;li&gt;Focal Length: {{lens.FL | number }}&lt;/li&gt;
        &lt;li&gt;Brand: {{lens.Brand}}&lt;/li&gt;
        &lt;li&gt;Mount: {{lens.Mount}}&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/section&gt;
  </code></pre>