app = angular.module('plunker', ['mm.foundation'])
app.controller 'MainCtrl', ($scope, $modal) ->
$scope.openModal = ->
$modal.open
templateUrl: 'modal.html'
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link data-require="foundation@5.4.7" data-semver="5.4.7" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.4.7/css/foundation.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.15/angular.js" data-semver="1.3.15"></script>
<script src="https://rawgit.com/pineconellc/angular-foundation/gh-pages/mm-foundation-tpls-0.5.1.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p><button type="button" ng-click="openModal()">Open modal</button></p>
</body>
</html>
/* Put your css in here */
<div>
<h1>Hi there</h1>
<a class="close-reveal-modal ng-scope" ng-click="$dismiss()">×</a>
<form name="myForm">
<input type="text" placeholder="required" ng-model="myModel" required autofocus>
myForm.$valid:
<strong>{{ myForm.$valid }}</strong>
</form>
</div>