Declaring two object literals in (one?) Data-ng-init and linking them to different views

Question

I am trying to create two different object literals and bind them to different views ( <table> s). However, I am not sure how to do this. I tried the method below, where I declare both object literals in the same data-ng-init parent container ( div ). I also tried to have two different data-ng-init directives for this div and have one object literal in each of the directives. However, both methods do not work, and I get errors (will post if someone wants to see them).

An example of what I tried:

 <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'},] "> <table id="dessertsdrinks"> <th>Desserts and Drinks</th> <tr data-ng-repeat="recipe in dessertsdrinks | filter:recipesearch | orderBy:'name'"> <td><a href="{{ recipe.url }}"> {{ recipe.name }} </a></td> </tr> </table> <table id="maineats"> <th>Main Eats</th> <tr data-ng-repeat="recipe in maineats | filter:recipesearch | orderBy:'name'"> <td><a href="{{ recipe.url }}"> {{ recipe.name }} </a></td> </tr> </table> </div> 

When I have only one object literal and one data-ng-init , it works fine. But how can I do this with two different lists? Is there a better way?

For example, can I have a controller that associates object literals with $scope based on an id tag (table) id or something else? For instance:

psuedocode

 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..}]; } } 

Answer 1

A simple move of objects inside the controller should work:

 $scope.dessertsdrinks = [ {name: 'Apple Pie Popcorn', url: 'pdfs/recipes/desserts_and_drinks/Apple Pie Popcorn.pdf'}, {name: 'Zucchini Muffins', url: 'pdfs/recipes/Zucchini Muffins.pdf'} ]; $scope.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'} ] 

No need to change the way you access them inside html.

Answer 2

You can also pass an object literal directly to the ng-init directive. Each property (the name is up to you) will be evaluated and will be available to all appearances.

ng-init="{a: dessertDrinks = [...], b: maineats = [...]}"