AngularJS Example

HTML

<div ng-app="docsIsoFnBindExample">
  <div ng-controller="Ctrl">
    <my-dialog ng-hide="dialogIsHidden" on-close="hideDialog()" dialog-is-hidden='dialogIsHidden'>
      Does Not Work Here!!!
    </my-dialog>
    <div ng-hide="dialogIsHidden">
           It works Here.
    </div>
  </div>

  <!-- my-dialog-close.html -->
  <script type="text/ng-template" id="my-dialog-close.html">
    <div class="alert">
      <a href="#" class="close" ng-click="close()">&times;</a>
      <div ng-transclude></div>
    </div>
  </script>
  

</div>

CSS

</style> <!-- Ugly Hack to make remote files preload in jsFiddle --> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<style>

JavaScript

angular.module('docsIsoFnBindExample', [])
  .controller('Ctrl', function($scope, $timeout) {
    $scope.name = 'Tobias';
    $scope.dialogIsHidden = false;
    $scope.hideDialog = function () {
      $scope.dialogIsHidden = true;
      console.log($scope.dialogIsHidden);
      $timeout(function () {
        $scope.dialogIsHidden = false;
        console.log($scope.dialogIsHidden);
      }, 2000);
    };
  })
  .directive('myDialog', function() {
    return {
      restrict: 'E',
      transclude: true,
      scope: {
        'close': '&onClose',
        'dialogIsHidden': '='
      },
      templateUrl: 'my-dialog-close.html'
    };
  });