I've been dealing with this for the last day trying to figure out what I've been doing wrong. I'm trying to pass a value into a filter and return a string from a hash that's been built from a return from a factory. I can get it to work in a similar function that doesn't call the factory, but whenever I return from the factory I'm unable to display the string, even though the appropriate string is show in the console. Am I missing something really easy here?
Controller here:
var app = angular.module('app', []); app.controller('ctrl', ['$scope', function($scope) { $scope.stuff = 1; }]) Factory here:
app.factory('factory', ['$q', function($q) { var list = [ {set1: 1,set2: 'name1'}, {set1: 2,set2: 'name2'} ]; var list2 = [ {set1: 1,set2: 'name6'}, {set1: 2,set2: 'name7'} ] var service = { getList: getList } return service; function getList(id) { var deferred = $q.defer(); if (id === 1) { deferred.resolve(list); } else if (id === 2) { deferred.resolve(list2); } return deferred.promise; } }]) Filter here:
app.filter('customFilter', ['factory', function(factory) { var factoryHash = {}; return function(input, id) { factory.getList(id) .then(function(res) { angular.forEach(res, function(value) { this[value.set1] = value.set2; }, factoryHash); console.log('factoryHash', factoryHash[input]) return factoryHash[input]; }) } }]) plnkr is here.
