angularjs - Function of isolated scope gets called multiple times -

i wrote angular code implement , remove functionality. purpose used directive "like-directive" takes 3 functions 1. upfn : code executed when liked 2. downfn: code executed when removed 3. upvchk: function checks whether liked or not. started false

for reason cannot use variable ng-if. have use upvchk function. function getting called more twice. should called twice because i'm using ng-if twice.

here codepen link http://codepen.io/puneet27/pen/japjww/

angular.module('app',[])    .controller('mainctrl',['$scope',mainctrl])    .directive('likedirective',[likedirective]);        function mainctrl($scope){      var mcl = this;      mcl.checkupvoted = checkupvoted;      mcl.upvote = upvote;      mcl.downvote = downvote;            function checkupvoted(){        alert("function check whether liked or not");        return mcl.upvoted;      }      function upvote(){        alert('like completed');        mcl.upvoted = true;      }      function downvote(){        alert('dislike completed');        mcl.upvoted = false;      }    }    function likedirective(){      return {        restrict: 'e',        scope: {          upfn:'&upfn',          downfn:'&downfn',          upvchk:'&upvchk'        },        templateurl: 'tpl.html'      }    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>      <div ng-app="app">    <div ng-controller="mainctrl mc">      <like-directive up-fn="mc.upvote()" down-fn="mc.downvote()" upv-chk="mc.checkupvoted()"></like-directive>    </div>    <script type="text/ng-template" id="tpl.html">      <div><span id="upvote" ng-if="!upvchk()" ng-click="upfn()">like</span><span id="upvoted" ng-if="upvchk()" ng-click="downfn()">liked</span></div>    </script>  </div>