igDialog in Angular open from scope event

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://igniteui.com/js/angular.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/extensions/igniteui-angular.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"/>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"/>
<link href="http://igniteui.com/css/bootstrap/bootstrap.min.css" rel="stylesheet"/>

<div ng-app="sampleApp" ng-controller="dialogController">
       <button ng-click="openDialog()">
          Open dialog
        </button>
        <ig-dialog id="dialog1" header-text="Foo" state="closed" height="325px">
            <content>
                <p>
                    <img style="width: 220px" src="http://igniteui.com/images/samples/dialog-window/content.jpg"/>
                </p>
                <textarea style="margin: 5px"> </textarea>
            </content>
        </ig-dialog>
    </div>

JavaScript

$(function () {
	var sampleApp = angular.module('sampleApp', ['igniteui-directives']);
  sampleApp.controller('dialogController', function ($scope) {
			$scope.openDialog = function (ev, ui) {
				//handle event, use arguements
				$("#dialog1").igDialog("open");
			};
		});
});