AngularJS : ng-include and ng-controller

Question

I have an app which I am building with angular, I have about 8-10 views to build out. All the views have a shared footer, based on the view and a set of business rules i nee

Answer 1

I fiddled around with your plunker, but also changed var vm = this; to $scope, so I'm failing at extra points :-)

I would strongly advise against the usage of $scope.$parent exactly for the reason you show. Various directives such as ng-include, ng-show etc, generate their own scopes.

You have no control if someone in the future changes your html and adds scopes, intentionally or otherwise.

I recommend using functions that reside on your MainCtrl and accessing them via inheriting scopes.

Plunker

$scope.getShouldShow = function() {
    return $scope.shouldDisplaySomthingInFooter;
  };
  $scope.setShouldShow = function(val) {
    $scope.shouldDisplaySomthingInFooter = val;
  };

  $scope.getMainMessage = function () {
    return $scope.mainMessage;
  }

And calling them:

Conditional footer Content

And:

  window.console.log('Footer grandparent scope name: ' + $scope.getMainMessage());
  window.console.log('Footer grandparent scope condition: ' + $scope.getShouldShow());