Dynamically reference an array

I am trying to reference 1 index (there will be 30 different index) based on what the user's actions and then use ng-repeat to go through each item in the index.

Controller:

$scope.meals = [
    { title: 'Abs', url:"#/app/mworkouts",id: 100, img: "img/female.jpg", vid:"https://media.giphy.com/media/TLpGHso4sEJlS/giphy.gif",},
    { title: 'Arms', url:"#/app/browse",id: 2 , img: "img/male.jpg", vid:"https://media.giphy.com/media/ZYi2Lc03nrryw/giphy.gif"},
    { title: 'Biceps', url:"#/app/search",id: 3, img: "img/Spotify_2.jpg", vid:"https://media.giphy.com/media/zOleW7sjYngQ0/giphy.gif" },
    { title: 'Legs', url:"#/app/search",id: 4, img: "img/Spotify_4.jpg", vid:"https://media.giphy.com/media/srNYANrTyYeFW/giphy.gif" },
    { title: 'Core', url:"#/app/mworkouts",id: 5, img: "img/female.jpg", vid:"https://media.giphy.com/media/4YAkSYGsKieXK/giphy.gif" },
    { title: 'Back', url:"#/app/mworkouts",id: 6, img: "img/male.jpg", vid:"https://media.giphy.com/media/8eBAeU1W4kV68/giphy.gif" }
  ];
$scope.deserts = [
    { title: 'Chocolate', url:"#/app/mworkouts",id: 1 },
    { title: 'Cake', url:"#/app/browse",id: 2 },
    { title: 'Ice Cream', url:"#/app/search",id: 3 },
    { title: 'Sundae', url:"#/app/search",id: 4 },
    { title: 'Cherry Pie', url:"#/app/mworkouts",id: 5 },
    { title: 'Apple Pie', url:"#/app/mworkouts",id: 6 },
    { title: 'Pumpkin Pie', url:"#/app.mworkouts", id: 7}
  ];

$scope.allbooks = [{
    'book1': {
      title: "Eat Pray Don't Love",
      price: 3.99,
      workoutname: "meals"
    },
    'book2': {
      title: "Hello Fadder Hello Mudder",
      price: 19.99,
      workoutname:"deserts"
    }
  }, {
    'book2': {
      title: "DaVinci Code",
      price: 7.99,
      workoutname:"deserts"
    }
  }];

function that sets choice:

$scope.pick = function(selectedBook) {
    $rootScope.choice = selectedBook;
  }

and finally the HTML:

<div ng-repeat="m in {{choice.workoutname}}">
        <div ng-if="meal_index==$index" ng-init="startCount=m.id">
          <img src="{{m.img}}" style="width:100%; height:100%;max-width:500px;">
          <img src="{{m.vid}}" style="width:100%; height:100%;max-width:500px;">
          <p>
          {{m.title}} {{m.id-40}}<!-- {{$index+1}} --> out of {{meals.length}} {{startCount}}
          <button ng-click='vs(m.id)'>Setter</button>
        </div>

    </div>

Sorry about all the weird names...it's just an example. Thanks in advance :)

This isn't uncommon to get this wrong as a newbie. But u need to understand angular/ionic in deep, mostly about array, objects and data binding. Hope this is helpful.

Below is one of the way u can do,

Controller:

var meals = [
    { title: 'Abs', url:"#/app/mworkouts",id: 100, img: "img/female.jpg", vid:"https://media.giphy.com/media/TLpGHso4sEJlS/giphy.gif"},
    { title: 'Arms', url:"#/app/browse",id: 2 , img: "img/male.jpg", vid:"https://media.giphy.com/media/ZYi2Lc03nrryw/giphy.gif"},
    { title: 'Biceps', url:"#/app/search",id: 3, img: "img/Spotify_2.jpg", vid:"https://media.giphy.com/media/zOleW7sjYngQ0/giphy.gif" },
    { title: 'Legs', url:"#/app/search",id: 4, img: "img/Spotify_4.jpg", vid:"https://media.giphy.com/media/srNYANrTyYeFW/giphy.gif" },
    { title: 'Core', url:"#/app/mworkouts",id: 5, img: "img/female.jpg", vid:"https://media.giphy.com/media/4YAkSYGsKieXK/giphy.gif" },
    { title: 'Back', url:"#/app/mworkouts",id: 6, img: "img/male.jpg", vid:"https://media.giphy.com/media/8eBAeU1W4kV68/giphy.gif" }
  ];

  var deserts = [
    { title: 'Chocolate', url:"#/app/mworkouts",id: 1 },
    { title: 'Cake', url:"#/app/browse",id: 2 },
    { title: 'Ice Cream', url:"#/app/search",id: 3 },
    { title: 'Sundae', url:"#/app/search",id: 4 },
    { title: 'Cherry Pie', url:"#/app/mworkouts",id: 5 },
    { title: 'Apple Pie', url:"#/app/mworkouts",id: 6 },
    { title: 'Pumpkin Pie', url:"#/app.mworkouts", id: 7}
  ];

  $scope.allbooks = [
    {
      category: "book1",
      title: "Eat Pray Don't Love",
      price: 3.99,
      workoutname: "meals"
    },
    {
      category: "book2",
      title: "Hello Fadder Hello Mudder",
      price: 19.99,
      workoutname: "deserts"
    },
    {
      category: "book3",
      title: "DaVinci Code",
      price: 7.99,
      workoutname: "deserts"
    }
  ];

  $scope.choices = '';
  $scope.pick = function(selectedBook) {
    if(selectedBook.workoutname === 'meals'){
      $scope.choices = meals;
      $scope.details.show();
    }else{
      $scope.choices = deserts;
      $scope.details.show()
    }
  };

  $scope.setter = function(id){
    //do something with id
  };

  $ionicModal.fromTemplateUrl('details.html', {
    scope: $scope,
    animation: 'slide-in-right'
  }).then(function (modal) {
    $scope.details = modal;
  });

  $scope.$on('$destroy', function() {
    $scope.details.remove();
  });

HTML

<ion-view view-title="Search">
<ion-content>
   <div class="list card"
        ng-repeat="book in allbooks"
        ng-click="pick(book)">
      <p class="positive"><strong>{{book.title}}</strong></p>
      <p>Type: {{book.workoutname}}</p>
      <p>Price: {{'$'+book.price}}</p>
  </div>
</ion-content>
</ion-view>

<script id="details.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="dark">
  <h1 class="title text-centerx">Details</h1>
  <button class="button button-clear ion-close" ng-click="details.hide()"></button>
</ion-header-bar>
<ion-content>
  <div class="list card"
       ng-repeat="choice in choices">
      <a class="item item-avatar" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#">
        <img src="{{choice.img}}">
        <h2>{{choice.title}}</h2>
      </a>
      <img ng-if="choice.vid" src="{{choice.vid}}" style="width:100%; height:100%;max-width:500px;">
      <div>
        <button class="button button-balanced" ng-click='setter(choice.id)'>Setter</button>
      </div>
  </div>
</ion-content>
</ion-modal-view>
</script>