Not able to update the `scope` value from directive function - angularjs

Question

Basically, i am using a service for to manage the popup-modal. some point i made the mistake or wrongly i have understand the way of using the service, i am not able to update the scope value here.
my service.js
"use strict";
angular.module("tcpApp").service("modalService", function () {
this.Name = "My Modal";
this.showModal = false; //default false.
});
controller.js:
$scope.modalService.Name = "Mo!" //changing the name works!
$scope.showModal = true; //changing the ng-show works!
here is my directive :
"use strict";
var modalPopup = function ( modalService ) {
return {
restrict : "E",
replace : true,
scope : {
showModal:"=" //getting value from controller.js
},
templateUrl : "views/tools/modalPopup.html",
link : function ( scope, element, attrs ) {
scope.Name = modalService.Name; //if i remove this Name not working!
scope.hideModal = function () {
alert("i am called");
scope.showModal = false; //it's not updating the value!
}
}
}
}
angular.module("tcpApp")
.directive("modalPopup", modalPopup);
here is my html in the index.html :
<modal-popup ng-show="showModal" showModal="showModal"></modal-popup>
here is my template in views/tools/modalPopup.html
<div class='ng-modal'>
<div class='ng-modal-overlay'></div>
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<div class='ng-modal-close' ng-click='hideModal()'>X</div>
<div class='ng-modal-dialog-content'>Please test me {{Name}}</div>
</div>
</div>
I am clicking on the hideModal(), But the showModal is not became false and the poup-up modal not closing.
where is the mistake here? and how the way i wrongly understand the service here? or what is the correct way to do this?
Thanks in advance.

Answer 1

You don't need to pass around anything in your view because you have a service setup to do this for you:
(function() {
"use strict";
var app = angular.module("tcpApp", []);
app.controller('someController', function($scope, modalService) {
$scope.modal = modalService;
$scope.modal.Name = "Mo!"
});
app.service("modalService", function() {
this.Name = "My Modal";
this.isOpen = false;
this.hide = function() {
this.isOpen = false;
};
this.show = function() {
this.isOpen = true;
};
});
})();
(function() {
"use strict";
angular.module("tcpApp").directive("modalPopup", function(modalService) {
return {
restrict: "E",
replace: true,
scope: {},
templateUrl: "modalPopup.html",
link: function(scope, element, attrs) {
scope.modal = modalService;
}
}
});
})();
.ng-modal {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.ng-modal:after {
content: "";
display: block;
position: absolute;
height: 100%;
width: 100%;
z-index: 10;
background-color: rgba(0, 0, 0, 0.2);
}
.ng-modal-dialog {
width: 300px;
height: 150px;
position: absolute;
left: 50%;
top: 15px;
margin-left: -150px;
z-index: 100;
text-align: center;
background-color: white;
}
.ng-modal-close {
width: 32px;
height: 32px;
line-height: 32px;
border-radius: 50%;
background-color: red;
margin: 5px auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<div ng-app='tcpApp'>
<div ng-controller='someController'>
<input type="text" ng-model="modal.Name" />
<button ng-click='modal.show()'>show modal</button>
<modal-popup></modal-popup>
</div>
<script type="text/ng-template" id="modalPopup.html">
<div class='ng-modal' ng-if="modal.isOpen">
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<div class='ng-modal-close' ng-click='modal.hide()'>X</div>
<div class='ng-modal-dialog-content'>Please test me {{modal.Name}}</div>
<input type=text" ng-model="modal.Name"/>
</div>
</div>
</script>
</div>

Answer 2

Are you getting alert 'i am called'? If yes, try this
alert("i am called");
scope.showModal = false; //it's not updating the value!
scope.$apply(); // add this line it will update scope object value

Answer 3

try this
scope.$apply(function() {
scope.showModal = false;
});