Routing.generate() module (FriendsofSymfony/FOSjsRouting Bundle) - angularjs

Question

I am trying to create a multiple input tags-input field in AngularJS, where I also want to add auto complete, so that on typing atleast 3 letters in the input field, the already existing tag names in the database appear as suggestions in the dropdown.
Here is the problem:
I am using Routing.generate() module of the FOSjsRouting Bundle to call the controller action inside the javascript code (the action in-turn returns the following JsonResponse object):
Here is the controller code:
/**
* #Route("/jsondata", options={"expose"=true}, name="my_route_to_json_data")
*/
public function tagsAction(Request $request)
{
$em = $this->getDoctrine()->getManager();
$query = $em->createQuery(
'SELECT t.text
FROM AppBundle:Tag t
WHERE t.id > :id
ORDER BY t.id ASC'
)->setParameter('id', '0');
$tagsdata = $query->getScalarResult();
$response = new Response(json_encode($tagsdata));
$response->headers->set('Content-Type', 'application/json');
return $response;
}
Here is the AngularJS code:
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.loadTags = function(query) {
return $http.get(Routing.generate('my_route_to_json_data'));
};
});
Here is the result I get:
Now when I save the Json response in tags.json and call it without using Routing.generate() module:
var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
$scope.loadTags = function(query) {
return $http.get('http://localhost/AngularTags/web/js/tags.json');
}
});
I get the perfectly working result:
Now I know the problem lies with proper usage of Routing.generate(). Since I am new to AngularJS and am just learning how to debug in console(which m loving by the way), m not entirely sure if I can figure out the problem on my own. Any help is appreciated.
n m sorry the post became too long, just wanted to make it clear.
So, awaiting response...

Answer 1

This is not a problem with AngularJS, this is a problem of variable scope in JavaScript.
Did you import the scripts in your HTML as specified in the documentation?