Mpondomise Mpondomise - 1 year ago 79
AngularJS Question

angularjs two ng controllers with resolve conflict in html markup

Here is my :


app.config(['$stateProvider', '$urlRouterProvider', '$controllerProvider', '$compileProvider', '$filterProvider', '$provide', '$ocLazyLoadProvider', 'JS_REQUIRES',
function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide, $ocLazyLoadProvider, jsRequires) {

app.controller = $controllerProvider.register;
app.directive = $compileProvider.directive;
app.filter = $filterProvider.register;
app.factory = $provide.factory;
app.service = $provide.service;
app.constant = $provide.constant;
app.value = $provide.value;


debug: false,
events: true,
modules: jsRequires.modules

// -----------------------------------

// Set up the states
$stateProvider.state('app', {
url: "/app",
templateUrl: "assets/views/app.html",
resolve: loadSequence('modernizr', 'moment', 'angularMoment', 'uiSwitch', 'perfect-scrollbar-plugin', 'toaster', 'ngAside', 'vAccordion', 'sweet-alert', 'chartjs', 'tc.chartjs', 'oitozero.ngSweetAlert', 'chatCtrl'),
abstract: true
}).state('app.dashboard', {
url: "/dashboard",
templateUrl: "assets/views/dashboard.html",
resolve: loadSequence('jquery-sparkline', 'dashboardCtrl'),
title: 'Dashboard',
ncyBreadcrumb: {
label: 'Dashboard'


app.controller('LoginCtrl', ["$scope", "alert", "auth", "$state", "$auth", "$timeout", function ($scope, alert, auth, $state, $auth, $timeout) {
$scope.submit = function () {
email: $,
password: $scope.password
.then(function(res) {
var message = 'Thanks for coming back ' + + '!';
if (!
message = 'Just a reminder, please activate your account soon :)';}
alert('success', 'Welcome', message);
return null;
.then(function() {
$timeout(function() {

} // submit function for login view
function handleError(err) {
alert('warning', 'oops there is a problem!', err.message);


var app = angular.module('myApp', ['my-app']);['$rootScope', '$state', '$stateParams',
function ($rootScope, $state, $stateParams) {

// Attach Fastclick for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers

// Set some reference to access them from any scope
$rootScope.$state = $state;
$rootScope.$stateParams = $stateParams;

// set below basic information
$ = {
name: 'My App',
author: 'example author',
description: 'My Platform',
version: '1.0',
year: ((new Date()).getFullYear()),
isMobile: (function () {
var check = false;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
check = true;
return check;
$rootScope.user = {
name: 'Peter',
job: 'ng-Dev'


the problem is when I add
to my login div on the html file for login, it works. But I have another div just below the login div:

<div class="copyright" >
{{app.year}} &copy; {{ }} by {{ }}.

This doesn't work! however, I have a similar one above the login div, it works:

<div class="logo">

<img ng-src="{{app.layout.logo}}" alt="{{}}"/>

where is the problem? How to address it?

Answer Source

if you are using angular ui-router, it's not neccessary to add ng-controller="loginCtrl" to your DIVs manually, instead add controller property in your $stateProvider.state


.state('app.dashboard', {
        url: "/dashboard",
        templateUrl: "assets/views/dashboard.html",
        title: 'Dashboard',
        controller: 'dashboardCtrl',
        resolve: {
                    deps: ['$ocLazyLoad', function ($ocLazyLoad) {
                        return $ocLazyLoad.load('path/to/your/controller.js');
        ncyBreadcrumb: {
            label: 'Dashboard'

when you change your state usually views change to, that's the point right? setting controllers on the fly might not work as you expect.

checkout documentation