user6680 user6680 - 2 months ago 5x
AngularJS Question

Array not outputting in modal

I can't figure out why the content in my array isn't outputting in the modal.
I'm doing a ng-repeat. the buttons are pulling from the array, but the content inside the modal is blank. Can anyone tell me whey?

Here's a jsfiddle:

<div ng-app="app">

<div ng-controller="RecipeController">
<div ng-repeat="recipe in ChickenRecipes">
<button class="btn btn-default" ng-click="open()">{{ }}</button> <br />

<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>Recipe: {{ }}</h3>
<div class="modal-body">
Recipe Content<br />

{{ recipe.cookTime }}
<div class="modal-footer">





$modal create a child scope (and default is child of $rootScope) for the modal

So what you need is something like this:

$ = function (recipe) {
    $scope.recipe = recipe;
    var modalInstance = ${
      templateUrl: 'myModalContent.html',
      scope: $scope,


<button class="btn btn-default" ng-click="open(recipe)">{{ }}</button> <br />

P/s: It's better to use $modal's resolve and controller option (pass the resolved data to the new controller)