从$watch打开AngularJS模式

我正在尝试将angularjs用于一个网站，在该网站中，单击画布项会打开引导模式。到目前为止，除了出现一个模态，其他一切都正常工作。单击项目时，我得到错误信息： TypeError:无法读取未定义的属性“open”

有人能帮我弄清楚为什么open调用不正确吗。多谢各位

app.controller('contentModalCtrlr', ['$scope', function($scope, $modal) {
$scope.opened = '';

$scope.open = function (template) {
  consloe.log(template);
    var modalInstance = $modal.open({
        templateUrl: template,
        controller: 'ModalInstanceCtrlr',
        size: 'lg'
    });
};

$scope.$watch('opened', function(newValue, oldValue) {
    console.log(newValue,oldValue);

    if (newValue == 'spellcards') {
        console.log('Open a Spell Card Modal!');
        $scope.open('spellcards.html');
    }
    else if (newValue == 'monstercards') {
  console.log('Open a Monster Card Modal!');
  $scope.open('monstercards.html');
}
}); 
console.log($scope);
}]);

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
  $scope.ok = function () {
    $modalInstance.close();
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

打字错误：

var modalInstance = $modal.open({
    templateUrl: template,
    controller: 'ModalInstanceCtrlr', // <-- extra 'r'
    size: 'lg'
});

注:

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance) {

---

@deadpickle查看我的编辑，昨晚我有点累了，我的答案错了。现在修复它。你是对的，但我也忘了在我的内容modalctrlr中传递$modal（这是正确的术语吗）。

app.controller('ModalInstanceCtrl', function ($scope, $modalInstance) {