select2 not working inside angularjs tabs - angularjs

i have angularjs tab and i need select2 inside one of them.select2 woking in all of my page but not inside tab.
parts of tab code is:
<script type="text/ng-template" id="MetaIndicators.tpl.html" >
<div class="row col-xs-12" style=" margin-right:10px;margin-top:22px" >
<div class="form-group inline col-xs-12">
<div class=" form-group inline meta-form-groups col-xs-12">
<label class="metaLabels">ژانر</label>
<textarea name="Genre" data-kind="1" type="text" class=" form-control inline" ng-model="indicators1" ng-bind="indicators1" style="width:400px;float:right" readonly/>
<button class="btn btn-danger inline" style="margin-right: 35px;margin-top: 8px;" data-toggle="modal" data-target="#send-modal-IndicatorsGenre" ng-show="AllowEdit">ویرایش</button>
</div>
</div>
<div class="modal fade" id="send-modal-IndicatorsGenre" role="dialog" aria-hidden="true">
<div class="modal-dialog" style="background-color: white; margin-top: 100px;height: 179px; width:680px;">
<div class="modal-body" style="height:80%">
<form id="metaIndicatorsGenreInsert" class="form-horizontal" role="form">
<div class="col-xs-12" style="margin-top:8px;">
<label for="GenreID" class="col-xs-1 control-label" style="width:59px">ژانر</label>
<div class="col-xs-10">
<select multiple id="e1" style="width:500px">
<option></option>
<option ng-repeat="gn in GenreID" value="{{ gn.Key }}" ng-model="gn.Value">{{ gn.Value }}</option>
</select>
</div>
</div>
<hr class="stylish" />
<div class="col-xs-12" style="margin-top:20px;">
<i class="fa fa-mail-forward"></i> ثبت
انصراف
</div>
</form>
</div>
</div>
</div>
</script>
i add select2.min.js and select2.min.css to index .
function of fill select is :
function GetGenreListData() {
var Genre = metaService.CallService('get', "basic/GenreID", "");
Genre.success(function (data) {
$scope.GenreID = data;
}).error(function (data, status) {
alert($cookies.get('searchedMeta') + data.status);
});
}
and function of setting select2 is :
$("#e1").select2({
closeOnSelect: false
});
thanks alot

Related

md-datepicker is not working on bootstrap modal, while works on simple page in angularjs

I am using md-datepicker from angular material. It is working fine except on bootstrap modal. I have applied various solutions like z-index:1200 but none of them proves useful for me.
Following libraries I am using:
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.10/angular-material.min.css" />
It shows the area when I use inspect element:
Here is the Modal Code:
<!-- Bootstrap Modal for Add an Event -->
<div class="modal fade" id="AddEvent" role="dialog">
<div class="modal-dialog">
<form ng-submit="addNewEvent()">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"> <span class="team-member-icon"><img class="" ng-src="home/img/event-star.svg"></span> Add Event</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="add-member-modl">
<div class="form-group">
<label>Event Name</label>
<input ng-model="newEvent.name" type="text" ng-focus="focusInput = true" class="form-control" placeholder="Mehndi" ng-required="true">
<input type="hidden" ng-model="newEvent.event_id">
<ul class="advance_search_inner" ng-show="focusInput">
<li ng-repeat="event in events| filter:newEvent.name" ng-click="newEvent.name = event.name; focusInput = false; newEvent.event_id = event._id">
{{event.name}}
</li>
</ul>
</div>
<div class="form-group">
<label>Date</label>
<md-datepicker md-open-on-focus ng-model="newEvent.start_date"></md-datepicker>
</div>
<div class="form-group">
<label>Duration</label>
<select class="form-control" ng-model="newEvent.duration">
<option value="1 Day">1 Day</option>
<option value="2 Days">2 Days</option>
<option value="3 Days">3 Days</option>
</select>
<!--<input type="text" class="form-control" ng-model="newEvent.duration" placeholder="1 Day(s)" ng-required="true">-->
</div>
</div>
</div>
<div class="modal-footer mod-footr">
<button type="submit" class="btn btn-default">Send</button>
</div>
</div>
</form>
</div>
</div>
Probably the z-index of the modal is higher than the date picker selector. Try to change the datepicker z-index with the following css:
.md-datepicker-calendar-pane {
z-index: 2000;
}

how to validate two select boxes in angular js

this is my html form that have to use to get the details but when i use the required attribute in the select tag, only the first one is validated and not the second one or an other field after the select tag, for eg if i select option in the first select and click post project then there is no error about the validation, and if i dont select the data from the first select tag there is validation error popup saying that the field is required,
<form name="myForm" role="form" action="#">
<div class="well" style="margin-left:20px; margin-right:20px">
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-lg-12">
<h4 style="color:darkblue">What type of project do you require?</h4>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-6 col-lg-6">
<select name="drop1" class="form-control" ng-model="project.match1">
<option value="">-- Select Category --</option>
<option ng-repeat="items in serviceCategory" value="{{items.ServiceCategoryId}}">{{items.ServiceCategoryName}}</option>
</select>
</div>
<div class="col-md-6 col-lg-6">
<select class="form-control" ng-model="project.match2" name="drop2">
<option value="">-- Select Sub Category --</option>
<option ng-repeat="a in service" ng-if="a.ServiceCategoryId==project.match1">
{{a.ServiceName}}
</option>
</select>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<textarea ng-model="project.ServiceCategories" placeholder="Add Service Categories here" rows="3" style="resize:none; width:100%"></textarea>
</div>
</div>
</div>
<div class="well" style="margin-left:20px; margin-right:20px">
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12 text-left">
<h4 style="color:darkblue">What is your Project about</h4>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12 text-left">
Describe your Project<br>
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<input type="text" ng-model="project.DescribeProject" style="width:100%">
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-6 col-lg-6">
What is your Project about?
</div>
<div class="col-md-6 col-lg-6">
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<textarea ng-model="project.AboutProject" ng-trim="false" rows="3" cols="70" ng-maxlength="5000" style="resize:none; width:100%;"></textarea>
</div>
</div>
<br>
<div class="row" style="margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
Attach files
</div>
</div>
<div class="row" style="padding-top:10px; margin-left:5px; margin-right:5px">
<div class="col-md-12 col-lg-12">
<!--attach file code-->
<div style="height:30px; width:100%;">
</div>
</div>
</div>
<div class="row" style="margin-bottom:15px; margin-left:5px; margin-right:5px">
<div class="col-md-1 col-lg-1"></div>
<div class="col-md-10 col-lg-10">
<div class="text-right">
<button class="btn btn-default btn-primary" type="submit" ng-click="showData(project)">Post Project</button>
<button class="btn btn-default" data-dismiss="modal" aria-label="Close" style="color:black; border-color: #2e6da4">Close</button>
</div>
</div>
<div class="col-md-1 col-lg-1"></div>
</div>
</div>
</form>
The Script is
var app = angular.module("MyApp", []);
app.controller('MainCtrl', function ($scope, $http) {
$http.get('/JsonData/ServiceCategory.json').success(function (response) {
console.log("Service Category Connected");
$scope.serviceCategory = response;
});
$http.get('/JsonData/Service.json').success(function (res) {
console.log("Service Connected");
$scope.service = res;
});
$scope.showData = function (inputData) {
var Project = new Object();
Project.Category = inputData.match1;
Project.SubCategory = inputData.match2;
Project.ServiceCategories = inputData.ServiceCategories;
Project.Description = inputData.DescribeProject;
Project.AboutProject = inputData.AboutProject;
var ProjectJson = JSON.stringify(Project);
alert(ProjectJson);
}
});

Recaptcha cant get response in angular after changing page

I have a problem with my angular application. I have a register page on my site. Normally when I get straight to the register page it works fine, after submitting the form is sent and user is registered. Problem appears when I for example load register page then go to login page and then again to register. In this case the form is not sent to server.
I tried to figure it out and even to repair by refreshing page after clicking register link but it didn't help.
I debug my application a little and found that it's recaptcha causing my problem. I use angular-recaptcha version 2.2.5; Tried to log the output of vcRecaptchaService.getResponse() but nothing showed in console.
Here is some code, where the problem may lay:
Request of form
$scope.registerRequest = (form) => {
$scope.$broadcast('show-errors-check-validity');
if (!form.$valid) {
return;
}
$scope.isLoading = true;
$scope.formData.reCaptcha = vcRecaptchaService.getResponse();
apiRequest.post('user/register', $scope.formData).success((response) => {
$scope.isLoading = false;
$scope.registered = true;
$scope.formData = {};
});
};
Routes:
app.config(['$routeProvider', ($routeProvider) => {
$routeProvider
.when('/auth/login', {
controller: 'authLogin',
label: 'Logowanie',
templateUrl: 'app/components/authLoginView.html',
access: ['UNAUTH']
})
.when('/auth/register/', {
controller: 'authRegister',
label: 'Rejestracja',
templateUrl: 'app/components/authRegisterView.html',
access: ['UNAUTH']
})
.when('/auth/register/confirm', {
controller: 'authRegister',
label: 'Potwierdzenie rejestracji',
templateUrl: 'app/components/authRegisterView.html',
access: ['UNAUTH']
})
.when('/auth/register/resend', {
controller: 'authRegister',
label: 'Rejestracja',
templateUrl: 'app/components/authRegisterView.html',
access: ['UNAUTH']
})
}]);
And some HTML:
<div ng-if="section == 'register'" class="container employer-container">
<form name="registerForm" class="form-horizontal col-sm-6 col-sm-offset-3" loader is-loading="isLoading">
<h4 class="employer-h4">Rejestracja</h4>
<p class="bg-success text-success col-xs-12" ng-show="registered">
Użytkownik został zarejestrowany. Na podany adres e-mail wysłaliśmy dalsze instrukcje.
</p>
<div ng-hide="registered">
<div class="form-group" show-errors>
<label for="email" class="col-md-3 control-label">E-mail:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="email" placeholder="E-mail"
ng-model="formData.email" name="username"
ng-required="true">
</div>
</div>
<div class="form-group" show-errors>
<label for="password" class="col-md-3 control-label">Hasło:</label>
<div class="col-md-9">
<input type="password" class="form-control" id="password" placeholder="Hasło"
ng-model="formData.password" name="password" ng-minlength="5"
ng-required="true" equals="{{ formData.confirmPassword }}">
</div>
</div>
<div class="form-group" show-errors>
<label for="confirmPassword" class="col-md-3 control-label">Powtórz hasło:</label>
<div class="col-md-9">
<input type="password" class="form-control" id="confirmPassword" placeholder="Powtórz hasło"
ng-model="formData.confirmPassword" name="confirmPassword" ng-minlength="5"
ng-required="true" equals="{{ formData.password }}">
</div>
</div>
<div class="form-group" show-errors>
<label class="col-md-3 control-label" for="userType">Rodzaj konta:</label>
<div class="col-md-9">
<div class="btn-group" dropdown>
<button type="button" class="btn btn-default dropdown-toggle form-control"
id="userType" name="userType" dropdown-toggle ng-model="formData.userType"
ng-required="true">
{{ userTypes[formData.userType] || 'rodzaj konta' }} <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="(key, userType) in userTypes">
{{ ::userType }}
</li>
</ul>
</div>
</div>
</div>
<div class="form-group" show-errors>
<div class="col-md-3"></div>
<div class="col-md-9">
<input class="form-control" type="checkbox" id="acceptTerms" ng-model="formData.acceptedTerms" name="acceptTerms" ng-required="true">
<label class="control-label" style="text-align: left;" for="acceptTerms">Zgadzam się z  Regulaminem</label>
</div>
</div>
<div class="form-group" show-errors>
<div class="col-md-3"></div>
<div class="col-md-9">
<input class="form-control" type="checkbox" id="acceptTerms2" ng-model="formData.acceptedTerms2" name="acceptTerms2" ng-required="true">
<label class="control-label" style="text-align: left;" for="acceptTerms2">Wyrażam zgodę na przetwarzanie moich danych w celu realizacji usług w ramach Serwisu i akceptuję Politykę Prywatności..</label>
</div>
</div>
<div class="form-group" show-errors>
<div class="col-md-3"></div>
<div class="col-md-9">
<input class="form-control" type="checkbox" id="acceptTerms3" ng-model="formData.acceptedTerms3" name="acceptTerms3" ng-required="true">
<label class="control-label" style="text-align: left;" for="acceptTerms3">Wyrażam zgodę na przetwarzanie moich danych w celach marketingowych.</label>
</div>
</div>
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<div vc-recaptcha key="'key'"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
Zapomniane hasło |
Logowanie
</div>
<div class="col-md-3 text-right">
<button type="submit" class="btn btn-info" ng-click="registerRequest(registerForm)">Zarejestruj</button>
</div>
</div>
</div>
</form>
</div>
Problem could be seen here: http://pze2.biuro.netivo.pl/
Answering to one of questions about ['UNAUTH'] in my routes. It is for allowing only users who are not logged in to enter this page.
Thanks to Vinny I managed to solve the problem.
The problem lies as he said in reCaptcha.getResponse() not getting right widget.
For those who will have same problem I put the solution in my code:
Request:
$scope.registerRequest = (form) => {
$scope.$broadcast('show-errors-check-validity');
if (!form.$valid) {
return;
}
$scope.isLoading = true;
apiRequest.post('user/register', $scope.formData).success((response) => {
$scope.isLoading = false;
$scope.registered = true;
$scope.formData = {};
});
};
HTML:
<div ng-if="section == 'register'" class="container employer-container">
<form name="registerForm" class="form-horizontal col-sm-6 col-sm-offset-3" loader is-loading="isLoading">
<h4 class="employer-h4">Rejestracja</h4>
<p class="bg-success text-success col-xs-12" ng-show="registered">
Użytkownik został zarejestrowany. Na podany adres e-mail wysłaliśmy dalsze instrukcje.
</p>
<div ng-hide="registered">
...
<div class="form-group">
<div class="col-md-9 col-md-offset-3">
<div vc-recaptcha ng-model="formData.reCaptcha" key="'key'"></div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
Zapomniane hasło |
Logowanie
</div>
<div class="col-md-3 text-right">
<button type="submit" class="btn btn-info" ng-click="registerRequest(registerForm)">Zarejestruj</button>
</div>
</div>
</div>
</form>
</div>

Show the respective DIV based on ng-if expression. Angularjs

I want to show the div which has Turn On E-Verify when clienId has a value if not I want to show the div which has Turn Off E-verify. I am not getting any errors but always the second div shows up and the button won't work. What am I doing wrong?
HTML :
<div class="col-md-12 col-centered" ng-app="CompanyEVerify">
<div class="row" ng-controller="EVerifyOptionController">
<form name="EverifyForm" id="EVerifyForm" class="form-horizontal" role="form" novalidate ng-submit="EVerifyForm.$valid && submit()"
style="background-color: #F0F0F0; border-radius: 8px; padding-top: 10px; margin: 15px !important;">
<div class="alert alert-danger" id="messages" style="display:none">{{message}}</div>
<div class="form-horizontal">
<input type="hidden" ng-model="company.Id" />
<div class="row">
<div class="col-md-12">
<div style="font-size:20px;font-weight:bold;display:inline-block">Would you like to opt for E-Verify feature?</div>
<br />
<div >
<div class="row" ng-if="clientId">
<div class="col-xs-12 form-group">
<label class="control-label col-xs-2">Client ID</label>
<div class="col-xs-7">
<input type="text" name="clientID" class="form-control input-md" ng-model="clientID" />
</div>
<button type="button" class="btn btn-success col-xs-3" ng-click="saveEverifyOption(clientID)">
<i class="fa fa-spinner fa-pulse"></i> Turn On E-Verify
</button>
</div>
</div>
<div class="row" ng-if="!clientId">
<div class="col-xs-12 form-group">
<label class="control-label col-xs-2">Client ID</label>
<div class="col-xs-7">
<input type="text" name="clientID" class="form-control input-md" ng-model="clientID" />
</div>
<button type="button" class="btn btn-danger col-xs-3" ng-click="saveEverifyOption(clientID)">
<i class="fa fa-spinner fa-pulse"></i> Turn Off E-Verify
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
In my controller :
$scope.clientId= sessionStorage.clientId;
I am going to assume that your controller is properly evaluating your conditions. In which case you would use ng-class to bind to css classes. I am not sure If you are trying to hide/show or disable toggle. Going with show/hide, you can make a class:
.hide{
display:none;
}
On one of your elements:
<button ng-class="{'hide': clientId}" ></button>
On the other element:
<button ng-class="{'hide': !clientId}" ></button>
Now the hide property on both elements is bound to one single source.
Check out docs example

bootstrap-ui modal with angular

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...
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.

Resources