Trying to send the values from HTML to controller - angularjs-directive

Question

I am trying to send the values from html to controller but is not goes to controller. What is the problem with this code value is show undefined at controller and factory. I hope this code is easy understood:
var mymodal = angular.module('mymodal', []);
mymodal.controller('MainCtrl', function($scope, loginfactory) {
$scope.showModal = false;
$scope.toggleModal = function() {
$scope.showModal = !$scope.showModal;
};
$scope.doLogin = function() {
var promise = loginfactory.logincheck($scope.userid, $scope.pwd);
}
});
mymodal.factory("loginfactory", function($http, $q) {
return {
"logincheck": function(userid, pwd) {
console.log(userid);
console.log(pwd);
return Object;
}
};
});
mymodal.directive('modal', function() {
return {
template: '<div class="modal fade">' +
'<div class="modal-dialog">' +
'<div class="modal-content">' +
'<div class="modal-header">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="">×</button>' +
'<h4 class="modal-title">{{ title }}</h4>' +
'</div>' +
'<div class="modal-body" ng-transclude=""></div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace: true,
scope: true,
link: function postLink(scope, element, attrs) {
scope.title = attrs.title;
scope.$watch(attrs.visible, function(value) {
if (value == true)
$(element).modal('show');
else
$(element).modal('hide');
});
$(element).on('shown.bs.modal', function() {
scope.$apply(function() {
scope.$parent[attrs.visible] = true;
});
});
$(element).on('hidden.bs.modal', function() {
scope.$apply(function() {
scope.$parent[attrs.visible] = false;
});
});
}
};
});
My view:
<div ng-controller="MainCtrl" class="container">
<h1>Modal example</h1>
<button ng-click="toggleModal()" class="btn btn-default">Open modal</button>
<modal title="Login form" visible="showModal">
<form role="form">
<div class="form-group">
<label for="email">Email address</label>
<input type="text" class="form-control" ng-model="userid" placeholder="Enter email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" ng-model="pwd" placeholder="Password" />
</div>
<button type="submit" ng-click="doLogin()" class="btn btn-default">Submit</button>
</form>
</modal>
</div>

Answer 1

Here is what I mean see Plunker;
In your directive you used: scope: true, this mean what is change in the directive will not reflect on the parent scope Look at this so to get it works you have to do like this. in the submit btton: (angular best practice passing scope from view)
<button ng-click="doLogin(userid,pwd)" class="btn btn-default">submit</button>
in your controler:
$scope.doLogin = function(userid,pwd) {
var promise = loginfactory.logincheck(userid, pwd);
}
you see I don't pass $scope.userid and $scope.pwd in your loginfactory but pass the value from view because of scope: true, make your code won't work.
one last suggest, you can use UI bootstrap for angular so you don't have to mix with jquery bootstrap. UI Bootstrap