title: AngularJS Trying to Fetch Images Json file and render a template broke something
body: <p>Another Update </p>
  
  <p>I got it turns out the routeparams.Id is not working because I am using ui-router and not routeprovider to define my routes. You can use $stateParams instead.</p>
  
  <p><strong>Updated</strong> </p>
  
  <p>I fixed my data.json file but my detail.html partial is not rendered correctly. </p>
  
  <p>I changed it to </p>
  
  <pre><code>Hi
  
  &lt;ul class="backpageimages"&gt;
      &lt;li ng-repeat="img in extrainfo.images"&gt;
          &lt;img ng-src="{{img}}"&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>the hi is getting rendered which means its routing correctly but the console says </p>
  
  <pre><code>GET http://localhost:8000/data/undefined.json 404 (File not found) 
  </code></pre>
  
  <p>It can not find my 1.json file. </p>
  
  <p>now my controller looks like this </p>
  
  <pre><code>backpageApp.controller('SecondCtrl', function($scope, $routeParams, $http) {
    $http.get('data/' + $routeParams.listingId + '.json').success(function(data) {
        $scope.listingId = $routeParams.listingId; /* added this explicity */
        $scope.extrainfo = data; 
    });
  }); 
  </code></pre>
  
  <p>If it helps the url is this</p>
  
  <pre><code>http://localhost:8000/#/listings/1
  </code></pre>
  
  <hr>
  
  <p>Hi guys I am new to angular js and its trying to build a small Backpage in angular js. I am using the sample from the angularjs official tutorial at step 7 and step 8</p>
  
  <p><a href="http://docs.angularjs.org/tutorial/step_07" rel="nofollow">http://docs.angularjs.org/tutorial/step_07</a></p>
  
  <p><a href="http://docs.angularjs.org/tutorial/step_08" rel="nofollow">http://docs.angularjs.org/tutorial/step_08</a>  </p>
  
  <p>I am trying to fetch a json file with images which point to pictures in my folders locally. These will be displayed in another view.   </p>
  
  <p>This is a file called 1.json in my data folder. The file is validated json file. </p>
  
  <pre><code>{
      "images": [
          "images/pic1.jpg",
          "images/pic2.jpg",
          "images/pic3.jpg",
          "images/pic4.jpg",
          "images/pic5.jpg",
          "images/pic6.jpg",
          "images/pic7.jpg"
      ],
  
      "description": "The last room to be rented in a house of 4 bedrooms mostly young professionals students all females."
  }
  </code></pre>
  
  <p>Here is a snippet of data.json file also in my data folder</p>
  
  <pre><code>{
           "date":12012013,
           "id":1,
           "rent":600,
           "location": "East Boston",
           "title": "room close to transportation Jan 1st (East Boston) ",
          }
  </code></pre>
  
  <p>The 1.json corresponds with my id of 1 in my data.json. 
  In my module I made sure I added 'ngRoute' as a dependency</p>
  
  <pre><code>var backpageApp = angular.module('backpageApp', ['ui.router', 'ngResource', 'ngRoute']);
  </code></pre>
  
  <p>I downloaded the angular-route.js and added it to my index.html</p>
  
  <pre><code>&lt;script src="js/vendor/angular-route.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I have this controller that fetches the images according to the id</p>
  
  <pre><code>backpageApp.controller('SecondCtrl', function($scope, $routeParams, $http) {
    $http.get('data/' + $routeParams.listingId + '.json').success(function(data){
        $scope.extrainfo = data; 
    });
  }); 
  </code></pre>
  
  <p>I am using ui router so my state looks like this </p>
  
  <pre><code>.state('listingdetail', {
        url: "/listings/:listingId",
        templateUrl: "partials/detail.html",
        controller: 'SecondCtrl'
      })
  </code></pre>
  
  <p>Here is my detail.html</p>
  
  <pre><code>{{extrainfo.description}}
  
  
  
  &lt;ul class="pictures"&gt;
      &lt;li ng-repeat="img in extrainfo.images"&gt;
          &lt;img ng-src="{{img}}"&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This is what its returning in my chrome dev tool</p>
  
  <pre><code>[$promise: Object, $resolved: false]
   app.js:25
  SyntaxError: Unexpected token }
      at Object.parse (native)
  </code></pre>
  
  <p>Line 25 is a console log for my first controller. I am a bit lost. I am not sure which part of the step did I break the rendering. Also I have this in my index.html</p>
  
  <p></p>
  
  <pre><code>&lt;a href="#/listings/{{listing.id}}"&gt;
          Title:{{listing.title}}&lt;/a&gt;
  </code></pre>
  
  <p></li></p>
  
  <p>I have a data.json file returned using $resource in my firstctrl and stored in a $scope.listings. My ultimate goal is when someone click that title, it will direct the user to my detail partial with images displayed. </p>
  
  <p>maybe I am suppose to put this explicitly in my secondctrl </p>
  
  <pre><code>$scope.listingId = $routeParams.listingId; 
  </code></pre>