gistfile1.txt

-> index.html(.erb)

 <div ng-controller="TasksController">
 	<div ng-repeat="task in tasks" style="border:1px solid black; margin: 2px 2px 2px 2px; padding: 2px 2px 2px 2px;">
 		{{task.name}}
 		<button ng-click="open()">Edit</button>
 		<modal/>
 	</div>
 </div>
 
-> index.js.coffee
angular.module('ModalTest', [])


angular.element(document).ready ->
	angular.bootstrap(document, ['ModalTest'])

-> bl.js.coffee
angular.element(document).ready ->

	 angular.module('ModalTest').directive 'modal', () -> 

	 	link = (scope, element, attributes) => 
	 		element.dialog
	 			autoOpen: false
	 			modal: true
	 			title: 'Task'

	 		scope.open = =>
	 			element.dialog('open') 

	 	return { 
	 		templateUrl: 'partials/dialog-template.html'
	 		link: link
	 		restrict: 'E'
	 		transclude: true
	 	}

	 angular.module('ModalTest').controller 'TasksController', ($scope) ->
	 	$scope.tasks = [
	 		{ name: 'Walk Dog', description: 'Dog needs Walk' }, 
	 		{ name: 'Take out trash', description: 'ASAP' } 
	 	]
	 	
-> dialog-template.html

<form>
	<label for="name">Task Name</label>
	<input type="text" name="name" ng-model="task.name" />
	<br/>
	<label for="task_description">Description</label>
	<textarea name="description" ng-model="task.description"></textarea>
	<br/>
	<button>Save</button>
</form>