Array not outputting in modal - angularjs

Question

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:
http://jsfiddle.net/8s9ss/203/
<div ng-app="app">
<div ng-controller="RecipeController">
<div ng-repeat="recipe in ChickenRecipes">
<button class="btn btn-default" ng-click="open()">{{ recipe.name }}</button> <br />
<!--MODAL WINDOW-->
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3>Recipe: {{ recipe.name }}</h3>
</div>
<div class="modal-body">
Recipe Content<br />
{{ recipe.cookTime }}
{{recipe.directions}}
</div>
<div class="modal-footer">
</div>
</script>
</div>
</div>
</div>

Answer 1

$modal create a child scope (and default is child of $rootScope) for the modal
So what you need is something like this:
$scope.open = function (recipe) {
$scope.recipe = recipe;
var modalInstance = $modal.open({
templateUrl: 'myModalContent.html',
scope: $scope,
});
};
And:
<button class="btn btn-default" ng-click="open(recipe)">{{ recipe.name }}</button> <br />
P/s: It's better to use $modal's resolve and controller option (pass the resolved data to the new controller)

Answer 2

You are mixing up some concepts, putting the modal template inside the ng-repeat won't do a thing. That's not how modals work.
First, remove the template from the ng-repeat and put it elsewhere.
Then, you must create a controller for your modal:
app.controller('RecipeModalController', function($scope, $modalInstance, $modal, item){
$scope.recipe = item;
console.log(item);
});
And pass the recipe you want to open as a parameter on ng-click:
$scope.open = function (recipe) {
var modalInstance = $modal.open({
controller: 'RecipeModalController',
resolve: {item: function() {return recipe} },
templateUrl: 'myModalContent.html',
});
};
I've updated the fiddle to show it: http://jsfiddle.net/8s9ss/204/