title: How To Make the Recipe only to appear below the Category it belong to using ng-repeat in AngularJs?
body: <p>Below are the outcome that from postman and part of my html code. Now the problem is, the recipe was not listed in their own Category they belong to when i try to use ng-repeat to list out. How i need to change my html code to make it work? <a href="https://i.stack.imgur.com/C3s90.png" rel="nofollow noreferrer">fail html output, please have a look</a></p>
  
  <pre><code>&lt;p ng-repeat="category in categoryList"&gt;
     &lt;input type="button" ng-model="category.cID" name="name" ng-value="{{category.cID}}"/&gt;{{category.categoryTitle}}
    &lt;div ng-repeat="category in categoryList"&gt;
   &lt;div ng-repeat="recipe in category.recipes" ng-model="recipe.rID"&gt; {{recipe.recipeTitle}}&lt;/div&gt;&lt;/div&gt;
    &lt;/p&gt;
  
  [
  {
      "cID": 1,
      "categoryTitle": "Main Dishes",
      "recipes": [
          {
              "rID": 1,
              "cookTime": 30,
              "description": "a delicious fried chicken",
              "recipeTitle": "Fried Chicken"
          }
      ]
  },
  {
      "cID": 2,
      "categoryTitle": "Desert",
      "recipes": [
          {
              "rID": 2,
              "cookTime": 40,
              "description": "a delicious apple pie",
              "recipeTitle": "Apple Pie"
  
          }
      ]
  }]
  </code></pre>