bootstrap-ui modal with angular - angularjs

Question

I'm facing the following problem: When I try to instantiate a modal
angular.module('previewApp')
.controller('DienstleisterCtrl', function (dienstleisterRegObjService, staticDataService, $uibModal) {
var vm = this;
vm.dienstleisterTypen = staticDataService.getDienstleisterTypen();
vm.modRegObj = function (dienstleistertyp) {
dienstleisterRegObjService.vorselektiertesProdukt.typ = vm.dienstleisterTypen[dienstleistertyp];
var modalInstance = $uibModal.open({
templateUrl: 'scripts/angular/modals/templates/regform.html',
controller: 'RegFormCtrl as vm'
});
};
});
it throws in the modal controller
angular.module('previewApp')
.controller('RegFormCtrl', function (**$uibModalInstance**, dienstleisterRegObjService, staticDataService, fieldValidator) {
});
the error:
[$injector:unpr] Unknown provider: $uibModalInstanceProvider <-
$uibModalInstance <- RegFormCtrl
This is the modal:
It has two forms, one nested in the other.
<!-- Modal -->
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true" style="padding-right: 0px;">
<div class="modal-content">
<div class="close-modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<div class="form-horizontal" ng-form="regForm">
<fieldset>
<legend class="text-center">
<div class="panel formular-head">
<h3 class="formular-title">Registrieren</h3>
<p class="text-muted formular-description"></p>
</div>
</legend>
<div class="form-group">
<label class="col-md-4 control-label" for="organisation">Organisation</label>
<div class="col-md-6">
<input id="organisation" name="organisation" type="text" placeholder="z.B. Muster Catering GmbH" class="form-control input-md" ng-model="vm.regObj.organisation" ng-readonly="vm.orgReadOnly" ng-change="vm.checkValue('org')" ng-required="!vm.orgReadOnly">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="vorname">Vorname</label>
<div class="col-md-6">
<input id="vorname" name="vorname" type="text" placeholder="" class="form-control input-md" ng-model="vm.regObj.vorname" ng-readonly="vm.nameReadOnly" ng-change="vm.checkValue('name')" ng-required="!vm.nameReadOnly">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="nachname">Nachname</label>
<div class="col-md-6">
<input id="nachname" name="nachname" type="text" placeholder="" class="form-control input-md" ng-model="vm.regObj.nachname" ng-readonly="vm.nameReadOnly" ng-change="vm.checkValue('name')" ng-required="!vm.nameReadOnly">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="email">Email</label>
<div class="col-md-6">
<input id="email" name="email" type="text" placeholder="max#muster.ch" class="form-control input-md" ng-model="vm.regObj.mail" ng-required="true" ng-pattern="vm.getMailChecker();">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="natio">Nationalität</label>
<div class="col-md-6">
<select id="natio" name="nationalitaet" class="form-control" ng-model="vm.regObj.nationalitaet">
<option ng-value="vmnat" ng-repeat="vmnat in vm.nationalitaeten">{{vmnat}}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="sprache">Sprache</label>
<div class="col-md-6">
<select id="sprache" name="sprache" class="form-control" ng-model="vm.regObj.sprache">
<option ng-value="vmsprache" ng-repeat="vmsprache in vm.sprachen">{{vmsprache}}</option>
</select>
</div>
</div>
<div class="form-group produkt-katalog" ng-show="!vm.regObj.produkte.length == 0">
<label class="col-md-4 control-label produkt-label"></label>
<div class="col-md-6">
<div class="" ng-repeat="vmprod in vm.regObj.produkte track by $index">
<produkt-item produkt="vmprod"></produkt-item>
</div>
</div>
</div>
<div ng-form="produktForm">
<div class="formular-together panel shadowed">
<div class="form-group">
<label class="col-md-4 control-label" for="dienstleistertyp">Dienstleistung</label>
<div class="col-md-6">
<select id="dienstleistertyp" name="dienstleistertyp" class="form-control" ng-model="vm.vorselektiertesProdukt.typ" ng-required="vm.regObj.produkte.length == 0">
<option ng-value="vmtyp" ng-repeat="vmtyp in vm.typen">{{vmtyp}}</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="produkt">Produkt</label>
<div class="col-md-6">
<input id="produkt" name="produkt" type="text" placeholder="z.B. Lautsprecher, Dekoration, Helfer, Stilrichtung" class="form-control input-md" ng-model="vm.vorselektiertesProdukt.produkt" ng-required="vm.regObj.produkte.length == 0 || vm.vorselektiertesProdukt.typ !== ''">
</div>
</div>
<div class="form-group">
<label class="col-md-4"></label>
<div class="col-md-6">
<button type="button" class="btn btn-default pull-right" name="submit" ng-click="vm.addProduct()" ng-disabled="produktForm.$invalid || vorselektiertesProdukt.produkt == ''">Hinzufügen</button>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label"></label>
<div class="col-md-6">
<div class="pull-right">
<button id="abbrechen" name="abbrechen" class="btn btn-default">Abbrechen</button>
<button id="registrieren" name="registrieren" class="btn btn-default" ng-disabled="regForm.$invalid || regObj.produkte.length == 0" ng-click="vm.registrieren()">Registrieren</button>
</div>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal Ende -->
In the app.js ui-bootstrap is declared, also in the index.html.
angular
.module('previewApp', [
'ngAnimate',
'ngSanitize',
'ngResource',
'ngTouch',
'ngMessages',
'ui.bootstrap',
'ngToast'
]);
<script src="/bower_components/jquery/dist/jquery.js"></script>
<script src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-animate/angular-animate.js"></script>
<script src="/bower_components/angular-resource/angular-resource.js"></script>
<script src="/bower_components/angular-messages/angular-messages.js"></script>
<script src="/bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="/bower_components/angular-touch/angular-touch.js"></script>
<script src="/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="/bower_components/ngToast/dist/ngToast.js"></script>
This problem gives me headache, cause I know it's just a little fault, but in the last hours i tried nearly everything an nothing changed.
Help is very appreciated. I'll post an plunkr in the answers...

Answer 1

OK... I've no idea why or how it works but it does.
I did the following:
I changed "controller as" in creating modal plus removed named controllers from my index.html and replaced them by $scope.
I added in dienstleister.js, where the modal is beeing created, the modalinstance.result.then functions
Now there is no error anymore. If someone has an idea why it now works i would appreciate an explanation.
Thanks for your time guys.