title: Angular JS Json not populating in html view
body: <p>I have a really wierd problem. But due to some reallyyy annoying reason the same JSON object gets assoicated to one view but does not to the other (i know this sounds reallyy crazy but i just cant get my head around it) . </p>
  
  <p>I have the 2 same html views assoicated to the different controller in angular.</p>
  
  <p>both html are rendered on distinct routes at the client side:</p>
  
  <p>My app.js looks like:</p>
  
  <pre><code>.state('app.singlecategory', {
      url: "/search/:mycat",
      views: {
          'menuContent': {
              templateUrl: "templates/playlist.html",
              controller: 'SearchCategoryControl'
          }
      }
  })
  
  .state('app.single', {
      url: "/playlists/:playlistId",
      views: {
          'menuContent': {
              templateUrl: "templates/playlist.html",
              controller: 'PlaylistCtrl'
          }
      }
  });
  </code></pre>
  
  <p>so now the two routes /search/:mycat and on /playlists/:playlistId i am showing the same html page but with distinct controllers . Now in my controllers.js this is what is happening :</p>
  
  <pre><code>.controller('PlaylistCtrl', function($scope, $stateParams, $http, $sce) {
      var podcastId = $stateParams.playlistId
  
  
      //SAD Group: Controller action to get JSON for individial podcast
      $http.get('http://SRHRadio.com/podcasts/' + podcastId).success(function(data) {
          $scope.items = data;
          $scope.audioURL = $scope.items.resourceURI + $scope.items.podcastfile
          $scope.audioURL = $sce.trustAsResourceUrl($scope.audioURL);
          //alert($scope.audioURL);
      });
  
      $scope.audioHide = true;
      //SAD Grpup: Controller action for Displing the hidden audio tag  
      $scope.showAudio = function(showAudio) {
          $scope.audioHide = !$scope.audioHide;
  
      }
  })
  
  .controller('SearchCategoryControl', function($scope, $stateParams, $http) {
      var mycats = $stateParams.mycat
      $http.get('http://SRHRadio.com/podcasts/categories/' + mycats).success(func tion(data) {
          $scope.items = data;
      });
  });
  </code></pre>
  
  <p>the controller PlaylistCtrl works perfectly and the JSON object returned is :</p>
  
  <pre><code>{
      "id": 9,
      "title": "first test podcast",
      "metadata": "test metadata for first audio",
      "length": 13.25,
      "dateofbroadcast": "2015-05-11T11:05:52+01:00",
      "resourceURI": "http://127.0.0.1:80/Media/",
      "podcastfile": "sumith.mp3",
      "categories": "sports"
  }
  </code></pre>
  
  <p>this JSON is then correctly added to my html view</p>
  
  <pre><code>&lt;ion-view view-title="Playlist"&gt;
      &lt;ion-content&gt;
          &lt;ion-list&gt;
              &lt;ion-item&gt;
                  Title: {{items.title}}
                  &lt;br&gt;Description: {{items.metadata}}
                  &lt;br&gt;Length: {{items.length}} min
                  &lt;br&gt;Category: {{items.categories}}
                  &lt;br&gt;Date of Broadcast: {{items.dateofbroadcast}}
                  &lt;br&gt;
                  &lt;br&gt;
              &lt;/ion-item&gt;
      &lt;/ion-content&gt;
  &lt;/ion-view&gt;
  </code></pre>
  
  <p>On the second controller i am getting the same JSON (this as per required when searched by category of podcast ) and i am trying to render the html page in the same but JSON returned is not being associated to the view and in view i cannot see any values even though the JSON is returned and can see it in the chrome developer tools tab</p>
  
  <pre><code>[{
     "id": 9,
      "title": "first test podcast",
      "metadata": "test metadata for first audio",
      "length": 13.25,
      "dateofbroadcast": "2015-05-11T11:05:52+01:00",
      "resourceURI": "http://127.0.0.1:80/Media/",
      "podcastfile": "sumith.mp3",
      "categories": "sports"
  }]
  </code></pre>
  
  <p>Now the only notable difference is an [] encircling my JSON , but i am not sure why this is causing a problem ??</p>
  
  <p>Just to add the backend API is Sinatra :</p>
  
  <pre><code>get '/podcasts/:id' do
      @recent_podcasts = Podcasts.get(params[:id])
      @recent_podcasts.to_json
      #erb :podcasts
  end
  
  
  get '/podcasts/categories/:categories' do
  
      @recent_podcasts = Podcasts.all(:categories.like =&gt; "%"+params[:categories]+"%")
  
      @recent_podcasts.to_json
      #erb :podcasts
  
      #@contact.to_json
      #@podcast_filename = params[:podcastfilei
  end
  </code></pre>
  
  <p>Sorry for writing this long but i guess i had too</p>