title: How do I view JSON data from an arbitrary link within my app?
body: <p>I can view content from specific json array data from an arbitrary link within the app?</p>
  
  <p>As my demo plunker shows, my search works fine (search the term "content") and returns what I'd like; but I also want to be able to recall some of that returned data from certain links elsewhere in the app.</p>
  
  <p>Plunker scenario: 
  Clicking "View the info for content set 3" link in my plunker should show the info in content set 3 below it, but I can't figure out how to get it to work.</p>
  
  <p>Plunker Demo: <a href="http://plnkr.co/edit/Z8A8nJ6uQfdTwR2TGRtY?p=preview" rel="nofollow">http://plnkr.co/edit/Z8A8nJ6uQfdTwR2TGRtY?p=preview</a></p>
  
  <p>I'm also curious how I could keep the content visible when I refresh the page?</p>
  
  <p>HTML</p>
  
  <p></p>
  
  <pre><code>&lt;!-- Search --&gt;
  &lt;div class="well"&gt; 
    &lt;p&gt;Search the term "content"&lt;/p&gt;
    &lt;form role="form"&gt;
      &lt;div my-search ng-model="selectedContent" class="form-group clearfix search"&gt;
        &lt;input type="text" ng-model="selectedContent" ng-options="query as query.searchQuery for query in searchData" bs-typeahead="bs-typeahead" class="form-control search-field"/&gt;
        &lt;button type="button" class="btn btn-primary search-btn" ng-click="updateModel()"&gt;&lt;span class="glyphicon glyphicon-search"&gt;&lt;/span&gt;&lt;/button&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;!-- this link should also return the specified data --&gt;
  &lt;a href=""&gt;View info for content set 3:&lt;/a&gt;
  
  &lt;!-- Dynamic Content --&gt;
  &lt;div class="well"&gt;
    &lt;h4&gt;{{clickedContent.contentTitle}}&lt;/h4&gt;
    &lt;ul&gt;
      &lt;li ng-repeat="item in clickedContent.headlines" ng-bind-html="toTrusted(item.headline)"&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>AngularStrap Typeahead partial template</p>
  
  <pre><code>   &lt;ul class="typeahead dropdown-menu" tabindex="-1" ng-show="$isVisible()" role="select"&gt;
          &lt;li role="presentation" ng-repeat="match in $matches" ng-class="{active: $index == $activeIndex}"&gt;
            &lt;a href="" role="menuitem" tabindex="-1" ng-click="updateModel(); $select($index, $event)"&gt;
                &lt;div class="query" ng-bind="match.label" data-title="{{match.value.popoverTitle}}", data-content="{{match.value.popoverContent}}", data-placement="right", data-trigger="hover", bs-popover&gt;&lt;/div&gt;
            &lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>    var app = angular.module('demoApp', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap'])
      .config(function ($typeaheadProvider) {
        angular.extend($typeaheadProvider.defaults, {
          template: 'ngstrapTypeahead.html',
          container: 'body'
        }); 
      });
  
      app.directive('mySearch', function(){
        return {
          restrict: 'A',
          require: 'ngModel',
          link: function($scope, $element, $attrs, ngModel){
            ngModel.$render = function(){
               if (angular.isObject($scope.selectedContent)) {
                 $scope.clickedContent = $scope.selectedContent;
               }
            }
             $scope.updateModel = function() {
               $scope.clickedContent = $scope.selectedContent;
            }
          }
        }
      });
  
      function MainController($scope, $sce, $templateCache, $http) {
  
        $scope.selectedContent = '';
  
        $http.get('searchData.json').then(function(response){
          $scope.searchData = response.data;
          return $scope.searchData;
        });
  
        $scope.toTrusted = function(headlineHtml) {
          return $sce.trustAsHtml(headlineHtml)
        };
  
      };
  </code></pre>
  
  <p>JSON</p>
  
  <pre><code>     [
          {
              "contentId": 1,
              "searchQuery": "Content set 1 dummy query vestibulum abcdefghijklmnop",
              "contentTitle": "Pretaining to content set 1",
              "popoverTitle": "Query info",
              "popoverContent": "Interesting info about query",
              "headlines": [
                  {
                    "headline": "&lt;a href='#'&gt;1st headline in content set 1&lt;/a&gt;"
                  },
                  {
                    "headline": "&lt;a href='#'&gt;2nd headline in content set 1&lt;/a&gt;"
                  },
                  {
                    "headline": "&lt;a href='#'&gt;3rd headline in content set 1&lt;/a&gt;"
                  }
              ]
  
          },
          {
              "contentId": 2,
              "searchQuery": "Content set 2 dummy query vestibulum abcdefghijklmnop",
              "contentTitle": "Pretaining to content set 2",
              "popoverTitle": "Query info",
              "popoverContent": "Interesting info about query",
              "headlines": [
                  {
                    "headline": "&lt;a href='#'&gt;1st headline in content set 2&lt;/a&gt;"
                  },
                  {
                    "headline": "&lt;a href='#'&gt;2nd headline in content set 2&lt;a/&gt;"
                  },
                  {
                    "headline": "&lt;a href='#'&gt;3rd headline in content set 2&lt;/a&gt;"
                  }
              ]
          },
          {
              "contentId": 3,
              "searchQuery": "Content set 3 dummy query vestibulum abcdefghijklmnop",
              "contentTitle": "Pretaining to content set 3",
              "popoverTitle": "Query info",
              "popoverContent": "Interesting info about query",
              "headlines": [
                  {
                    "headline": "&lt;a href='#'&gt;1st headline in content set 3&lt;/a&gt;"
                  },
                  {
                    "headline": "&lt;a href='#'&gt;2nd headline in content set 3&lt;/a&gt;"
                  },
                  {
                    "headline": "&lt;a href='#'&gt;3rd headline in content set 3&lt;/a&gt;"
                  }
              ]
          },
              {
              "contentId": 4,
              "searchQuery": "Content set 4 dummy query vestibulum abcdefghijklmnop",
              "contentTitle": "Pretaining to content set 4",
              "popoverTitle": "Query info",
              "popoverContent": "Interesting info about query",
              "headlines": [
                  {
                    "headline": "&lt;a href='#'&gt;1st headline in content set 4&lt;/a&gt;"
                  },
                  {
                    "headline": "&lt;a href='#'&gt;2nd headline in content set 4&lt;/a&gt;"
                  },
                  {
                    "headline": "&lt;a href='#'&gt;3rd headline in content set 4&lt;/a&gt;"
                  }
              ]
          }
      ]
  </code></pre>