How to make lodash work with Angular JS?

Question

I'm trying to use lodash use it at ng-repeat directives, in this way:

<div ng-controller="GridController" ng-repeat="n in _.range(5)">     <div>Hello {{n}}</div> </div> 

Being GridController:

IndexModule.controller('GridController', function () {  this._ = _  }) 

However is not working and so, nothing being repeated. If I change the directive to ng-repeat="i in [1,2,3,4,5]" it'll work.

lodash is already included via <script> at <header> before angular. How can I make it work?

Answer 1

I prefer to introduce '_' globally and injectable for tests, see my answer to this question Use underscore inside controllers

var myapp = angular.module('myApp', [])   // allow DI for use in controllers, unit tests   .constant('_', window._)   // use in views, ng-repeat="x in _.range(3)"   .run(function ($rootScope) {      $rootScope._ = window._;   }); 

Answer 2

I just wanted to add some clarification to @beret's and @wires's answer. They definitely helped and got the jist of it but getting the whole process in order might suit someone. This is how I set up my angular environment with lodash and got it working with yeoman gulp-angular to serve properly

• bower install lodash --save (This adds to bower and a saves to bower json)

• modify bower json to have lodash load before angular does. (This helps if you're using gulp inject and don't want to manually put it into index.html. otherwise put it into the index.html before the angular link)

• Make a new constant per @wires's direction.

'use strict';  angular.module('stackSample')   // lodash support   .constant('_', window._); 

• Inject into any angular service, filter, or controller as you would anything else:

.filter('coffeeFilter', ['_', function(_) {...}]); 

• To throw it into some angular html view just inject it into the controller and assign a scope variable to it:

.controller('SnesController', function ($scope, _) {   $scope._ = _; }) 

Hope this helps someone set up their site. :)