Loading factories dynamically (on demand) with AngularJS - angularjs

Question

Following Dan Wahlin's article on dynamically loading controllers and views http://weblogs.asp.net/dwahlin/archive/2013/05/22/dynamically-loading-controllers-and-views-with-angularjs-and-requirejs.aspx, I coded an sample AngularJS application with one minor modification as follows.
While Dan for example loads the data service ahead of time (main.js), I would lile to load a factory only if a controller needs it like this:
main.js
require.config({
baseUrl: '/app'
});
require([
'app',
'services/routeResolver'
//'services/mathService'
],
function () {
angular.bootstrap(document, ['myFirstApp'])
});
mathService.js
'use strict';
define(['app'], function (app) {
var mathService = function () {
return {
add: function(n1, n2) {
if (isNaN(n1) || isNaN(n2)) {
return NaN;
}
return parseInt(n1) + parseInt(n2);
}
}
};
app.factory('mathService', mathService);
});
v2Controller.js
'use strict';
define(['app', 'services/mathService'], function (app) {
var ctrl = function ($scope, mathService) {
$scope.greeting = 'Hi there from viewtwoland!';
$scope.n1 = 0;
$scope.n2 = 0;
$scope.result = 0;
$scope.add = function ()
{
$scope.result = mathService.add($scope.n1, $scope.n2);
}
};
app.register.controller('v2Controller', ['$scope', 'mathService', ctrl]);
});
v2.html
<p>
{{greeting}}
</p>
<input type="text" data-ng-model="n1" id="n1" name="n1" data-ng-change="add()" />
<input type="text" data-ng-model="n2" id="n2" name="n2" data-ng-change="add()" />
<div>
The sum of {{n1}} and {{n2}} is: {{result}}
</div>
This is however not working as expected. Here is the result I am getting:
{{greeting}}
[ ] [ ]
The sum of {{n1}} and {{n2}} is: {{result}}
Any ideas. Is this doable at all.

Answer 1

I resolved the issue by changing the controller as follows:
define(['app', 'services/mathService'], function (app) {
var ctrl = function ($scope, mathService) {
$scope.greeting = 'Hi there from viewtwoland!';
$scope.n1 = 0;
$scope.n2 = 0;
$scope.result = 0;
$scope.add = function ()
{
return mathService.add($scope.n1, $scope.n2);
}
};
app.register.controller('v2Controller', ['$scope', 'mathService', ctrl]);
});
and the mathService as follows:
'use strict';
define(['app'], function (app) {
var mathService = function () {
return {
add: function(n1, n2) {
if (isNaN(n1) || isNaN(n2)) {
return NaN;
}
return parseInt(n1) + parseInt(n2);
}
}
};
app.register.factory('mathService', mathService);
});
If you have a better solution for this issue, I'd be interesting in knowing it.