Using templates in modal dialog in AngularJS

Question

I'm having a heck of a time trying to get this to work. i'm more familiar with jQuery but this app isn't using jQuery and i don't want to mix the 2. plus, i don't think you can use templates in jQuery. anyway, i'll show the code snippets i tried and maybe you can tell me where i went wrong. i have 2 buttons that open a modal dialog where the content of the modal is stored in a template and the template chosen depends on the button clicked..

<button class="btn btn-primary pull-right" style="margin-left: 10px; background: #990000"
        ng-click="showEmail('1')"
        ng-show="ctrl.searchResults!=null && ctrl.searchResults.length > 0">
    T1
</button>
<button class="btn btn-primary pull-right"
        style="margin-left: 10px; background: #990000"
        ng-click="showEmail('2')"
        ng-show="ctrl.searchResults!=null && ctrl.searchResults.length > 0">
    T2
</button>
..............................

$scope.showEmail = function (id) {
    var modalInstance = $modal.open({
        templateUrl: (id == '1') ? 'template1.html' : 'template2.html',
        controller: 'SearchController',
        resolve: {
        editId: function () {
            return id;
            }
        }
    });
}

at first i was confused as to where i was supposed to reference the actual modal id (in html) that i want to open but then realized that maybe that's what the templates were for..

<div class="modal fade" id="dlgEmail" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="row">
                    <p>
                        Content goes here
                    </p>
                </div>
            </div>
            <div class="modal-footer">
                <div class="row">
                    <button type="button" class="btn btn-default"
                            data-dismiss="modal" ng-click="doEmail()"
                            style="background-color:crimson;color:white">
                        Submit
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

my first attempt at running this, i got an error '$modal not defined'. when i looked that up it said that i need to inject $modal into my controller so i tried this..

app.controller("AppController",
function($scope, $http, $modal) {
var t = this;

once i added that, i had high hopes that it was gonna work but instead i got another error..

 

'$injector:unpr Unknown Provider'.

 

every example makes it sound this simple but i can't get it to work. any help would be much appreciated.