title: declaring two object literals in (one?) data-ng-init and binding them to different views
body: <p>I'm trying to create two different object literals and bind them to different views (<code>&lt;table&gt;</code>s). However, I'm not sure how to go about doing this. I've tried the below method where I declare both object literals in one <code>data-ng-init</code> of a parent container (the <code>div</code>). I've also tried having two different <code>data-ng-init</code> directives for that div and having one object literal in each of the directives. However both methods did not work and I get errors (will post if anyone would like to see them). </p>
  
  <p>Example of what I've tried:</p>
  
  <pre><code>&lt;div id="recipes" data-ng-init=" 
    dessertsdrinks = [
    {name: 'Apple Pie Popcorn',  url: 'pdfs/recipes/desserts_and_drinks/Apple Pie Popcorn.pdf'},  
    {name: 'Zucchini Muffins',  url: 'pdfs/recipes/Zucchini Muffins.pdf'} 
    ];
  
    maineats = [ 
    {name: 'Autumn Enchilada Casserole',  url: 'pdfs/recipes/Autumn Enchilada    Casserole.pdf'},
    {name: 'Build your own Taco',  url: 'pdfs/recipes/Build your own Taco.pdf'},]
    "&gt;
  
    &lt;table id="dessertsdrinks"&gt;
      &lt;th&gt;Desserts and Drinks&lt;/th&gt;
          &lt;tr data-ng-repeat="recipe in dessertsdrinks | filter:recipesearch | orderBy:'name'"&gt;
          &lt;td&gt;&lt;a href="{{ recipe.url }}"&gt; {{ recipe.name }} &lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
     &lt;/table&gt;
  
  &lt;table id="maineats"&gt;
          &lt;th&gt;Main Eats&lt;/th&gt;
              &lt;tr data-ng-repeat="recipe in maineats | filter:recipesearch | orderBy:'name'"&gt;
              &lt;td&gt;&lt;a href="{{ recipe.url }}"&gt; {{ recipe.name }} &lt;/a&gt;&lt;/td&gt;
              &lt;/tr&gt;
         &lt;/table&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>When I only have one object literal and one <code>data-ng-init</code> it works perfectly. 
  But how could I do this with two different lists? Is there a better way?</p>
  
  <p>For example, could I have a controller which binds object literals to <code>$scope</code> based on the view's (table's) <code>id</code> tag or something? Like so :</p>
  
  <p><strong>psuedocode</strong></p>
  
  <pre><code>function recipeController(){
       if $scope id == "desertsdrinks" {
            $scope.recipes = [{.. dessert and drink recipe obj literal ..}];
       } else if $scope id == "maineats" {
            $scope.recipes =[{.. main eats recipe obj literal..}];
       }
   }
  </code></pre>