angularjs-controller

Is it possible to load a controller, it's js file, and a template dynamically based on a route group? Psuedo code which doesn't work: $routeProvider.when('/:plugin', function(plugin) { templateUrl: 'plugins/' + plugin + '/index.html', controller: plugin + 'Ctrl', resolve: { /* Load the JS file, from 'plugins/' + plugin + '/controller.js' */ } }); I've seen a lot of questions like this one but none that loads the js file/controller based on a route group. I managed to solve it inspired by @calebboyd, http://ify.io/lazy-loading-in-angularjs/ and http://weblogs.asp.net/dwahlin/archive/2013/05/22

I use a ng-repeat in my html file to display filtered items: <li ng-repeat="item in (filteredItems = (items | filter:query))"> {{ item.name }} </a> In the controller, I'd like to get the index of an item based on one of his property. Precision: I'd like to get the index in the filtered list and not in the whole list. Here for example, it will be the index of the item witch name is some_item_7 . var app = angular.module('myApp', []); app.controller('MyCtrl', ['$scope', function MyCtrl($scope) { $scope.query = 'some'; $scope.items = [ { name: 'some_item_1' }, { name: 'another_item_2' }, { name:

I have this: app.controller('foo1', function ($scope) { $scope.bar = 'foo'; }); app.controller('foo2', function ($scope) { // want to access the $scope of foo1 here, to access bar }); How would I accomplish this? You could use an Angular Service to share variable acrosss multiple controllers. angular.module('myApp', []) .service('User', function () { return {}; }) To share the data among independent controllers, Services can be used. Create a service with the data model that needs to be shared. Inject the service in the respective controllers. function ControllerA($scope, User) { $scope.user =

With the original way to define controllers , accessing the parent's scope was fairly trivial, since the child scope prototypically inherits from its parent. app.controller("parentCtrl", function($scope){ $scope.name = "Parent"; }) .controller("childCtrl", function($scope){ $scope.childName = "child of " + $scope.name; }); <div ng-controller="parentCtrl"> {{name}} <div ng-controller="childCtrl"> {{childName}} </div> </div> The Controller-As approach seems to be the recommended way to declare a controller. But with Controller-As, the above approach no longer works. Sure, I can access the parent

I have two templates with respective controllers and service files. One template's(fleetListTemplate) controller(fleetListController) loads data from its service file(fleetService) and displays in its view(fleetListTemplate). When this happens, and I click on one of the loaded data from fleetService, I should link fleetListController to fleetSummaryController to get data from its service file (fleetSummaryService) and display in fleetSummaryTemplate view. Can someone please help me with the coding? Thank you. The following are the respective modules, templates, controllers and service files.