Simple Angular Dialog Implementation

Dialog Controller.js

angular.module('myapp.controllers').controller('DialogCtrl',
	[ '$rootScope'
    , '$scope'
    , '$timeout'
    , function ($rootScope, $scope, $timeout) {

    $scope.itemType = $scope.itemType;

    $scope.dialogs = [];

    $rootScope.$on('openDialog', function (event, data) {

    	var newDialog = $.extend({
    		url: '/partials/modals/defaultDialog.html',
        dismissable: true,
    	}, data);

    	$scope.dialogs.push(newDialog);
    });

    $scope.removeDialog = function (dialog) {
    	var index = $scope.dialogs.indexOf(dialog);

    	if(index > -1) {
    		$scope.dialogs.splice(index, 1);
    	}
    };

    $scope.backgroundClick = function ($event) {
        if($($event.target).is('.dialog-container')) {
            for (var i = $scope.dialogs.length - 1; i >= 0; i--) {
                var dialog = $scope.dialogs[i];
                if (dialog.dismissable) {
                    $scope.removeDialog(dialog);
                }
            };

        }
    }

}]);

DialogTemplate.html

<div class="panel example-dialog" ng-controller="ExampleeDialogCtrl">
	<div class="arrow"></div>
	<h3>
		Title
	</h3>
	<ul class="unstyled action-list">
		<li>Stuff</li>
	</ul>

</div>

ImplementedDialogWithPositioning.js

angular.module('myapp.controllers').controller('ExampleDialogCtrl',
    [ '$rootScope'
    , '$scope'
    , '$timeout'
    , '$element'
    , function ($rootScope, $scope, $timeout, $element) {

    // Position Dialog
    var position = {left: 300, top: 50};
    if($scope.dialog.target) {
        position = $($scope.dialog.target).offset();
        position.left -= 139;
        position.top += 40;
    }

    $element.parents('.dialog').find('.panel').css(position);    

}]);

style.less

.dialog-container {
    background: rgba(0,0,0,0.2);
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    z-index: 1000;

    .panel {
        background: white;
        width: 260px;
        margin: 0;
        position: absolute;
        top: 105px;

        //right: 15px;
        border-radius: 6px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
        -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    }
}

Template.html

<!-- Dialogs -->
<div class="dialog-container" ng-controller="DialogCtrl" ng-show="dialogs.length" ng-click="backgroundClick($event)">
  <div class="dialog" ng-repeat="dialog in dialogs">
    <div  ng-include="dialog.url">
    </div>
  </div>
</div>