Not able to close modal window by function - angularjs

Question

I am using modal like
<modal title="Success" id='successmessage' visible="successmessage">
<form role="form">
Success ful result.
<button type="submit" class="btn btn-primary" ng-click="closesuccessmessage()" >Ok</button>
</form>
</modal>
I have a directive on modal..
'use strict';
angular.module('abc.directives', [])
.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="true">×</button>' +
'<h4 class="modal-title">{{ modalTitle }}</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.modalTitle = 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;
});
});
}
};
});
in my angular controller i have created function like below
$scope.closesuccessmessage = function()
{
$scope.successmessage = false;
}
But it does not have any effect. How can i make it work. As it is very important for me to control this from a function. Modal opens up on true value, but does not close on false value.

Answer 1

In order for angularjs to bind variable to view outside of properties expecting expressions you must use brackets.
<modal title="Success" id='successmessage' visible="{{successmessage}}">
<form role="form">
Success ful result.
<button type="submit" class="btn btn-primary" ng-click="closesuccessmessage()" >Ok</button>
</form>
</modal>
However I'm not sure visible is a valid property in HTML. If you want to hide modal using variable you could use ng-show and set success message variable in controller
<modal title="Success" id='successmessage' ng-show="successmessage">
<form role="form">
Success ful result.
<button type="submit" class="btn btn-primary" ng-click="closesuccessmessage()" >Ok</button>
</form>
</modal>

Answer 2

You can't use like above you're doing. You should call modal hide function to hide a modal. Try below snippet
$scope.closesuccessmessage = function()
{
$("#successmessage").modal('hide');
}
EDIT
It's not like that you can't use scope values in your HTML. If your controller is same, you can access it easily. I changed your HTML. Please try below one
<modal title="Success" id='successmessage' data-ng-show="successmessage">
instead
<modal title="Success" id='successmessage' visible="successmessage">