Angular Modal Only Works Within Index.html

My angular modal is working:

However, to get it to work, the modal script has to be within my index.html:

<script type="text/ng-template" id="myModalContent.html">
    <div class="modal-header">
        <h3 class="modal-title">I'm a modal!</h3>
    </div>
    <div class="modal-body">
        <ul>
            <li ng-repeat="item in items">
                <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
            </li>
        </ul>
        Selected: <b>{{ selected.item }}</b>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="ok()">OK</button>
        <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
    </div>
</script>

And this is the call in the controller to it:

    $scope.addRecipe = function () {
        var modalInstance = $modal.open({
            templateUrl: 'myModalContent.html',
            controller: 'ModalInstanceCtrl',
            size: 'sm',
            resolve: {
                items: function () {
                    return $scope.items;
                }
            }
        });

If I create an HTML file and put that above modal script in it, the modal stops showing up. (The page still gets grayed-out but there is no modal.) I've tried putting the HTML file in the root folder (right next to index.html) and I've had it in a separate folder, but it just won't show up. When I try to use this separate file, I change the templateUrl property of the call:

'app/partials/recipeAdd.html'

And I change the ID in the HTML:

<script type="text/ng-template" id="app/partials/recipeAdd.html">

What am I missing?

via Chebli Mohamed