AngularJS: initialize ZURB Foundation JS

Here is my take, in app.js:

.run(function($rootScope) {    $rootScope.$on('$viewContentLoaded', function () {        $(document).foundation();    });});

which will re-initialize Foundation when a new view is loaded (so that the components contained in the new view are also initialized). This way, your controllers do not need to be aware of this.

You could $apply the code in order to bring it into the Angular framework. Here is an example using $rootScope with run and this could also be done inside a controller/directive with any $scope:

app.run(function($rootScope){    $rootScope.$apply($(document).foundation());});

Another option::

$compile($(document).foundation())($scope);

Be sure to include the $compile service in your controller/directive to use it this way. E.g.:

app.directive('mydirective', function($compile) {    return {        link: function(scope, element, attrs) {            $compile($(document).foundation())(scope);        }    }});

There is a native angularJs support for foundation. Check out Angular Foundation.

Angular Foundation is a port of the AngularUI team's excellent angular-bootstrap project for use in the Foundation framework.

It has no dependencies but angular library itself and foundation CSS only.