Update value in custom directive from controller

Question

I can't seem to get this working. I'm new to angularjs, and I'm converting an existing web app to use angularjs. I have looked all around, and I can't seem to find an answer.

This is the main html:

<div>
   <custom-header form-object="mainCtrl.form"></custom-header>
   <custom-sidebar form-object="mainCtrl.form"></custom-sidebar>
   <custom-subheader form-object="mainCtrl.form"></custom-subheader>
   <ui-view id="ng_subview"></ui-view>
</div>

As you can see, I have a main entry with custom directives and the ui-view tag that injects the content when selecting the links in the custom sidebar or using the browser's url search bar.

My app.config file contains the routing configuration.

$stateProvider
 .state("parent", {
    url: "", //omitted
    template: "main.html",
    controller: "mainController",
    controllerAs: "mainCtrl",
    abstract: true,
    resolved: {} // omitted
 })
 .state("parent.customer_questions", {
    url: "", //omitted
    template: "customer_questions.html",
    controller: "customerQuestionController",
    controllerAs: "customerQestionCtrl",
 })

Main Controller:

function(factory, $stateParams){
  let self = this;
  // Http request
  self.form = factory.getData($stateParams.id).then(function(results){
    return results;
  });  
}

Question Controller:

function(customerQuestionsFactory, $stateParams, $filter, data, $scope){
    let self = this;

    self.customerQuestions = {
        questions: [],
        sendReply: function(index, conversation_id){
          /*
          When I call the method it updates the content of the
          customer question view, and it is working correctly.
          However, the custom sidebar directive keeps track of
          the total of new questions, but the sidebar doesn't update.
          I have tried:
          $parent in this case is the mainCtrl
          $scope.$parent.new_question_total = 100 // this does not work.
          */
        }
    }
 }

Sidebar Directive:

function($location){
   return {

       restrict: 'E',
       templateUrl: 'custom_sidebar.html',
       replace: true,
       scope: {
         formObject: "="
       },
       link: function($scope, element, attrs) {
          //code omitted
       }
    }
 }

Sidebar HTML:

<!-- 
    This is where I'm setting the value.
-->
<a ng-click="" ui-sref="" ng-bind="formObject.new_question_total"></a>  

I need to update the value inside the sidebar view "formObject.new_question_total".

Here is the scenario: When I'm navigating to the customer question view, there is a form that updates the customer questions, and it updates the content area. On this page it keeps track of how many questions are new. Obviously, when updating, the new symbol goes away. On the sidebar, there is a link that navigates to the customer question page with a total number of new questions. If I update the customer view, this number should decrease. I understand that when loading the page for the first time, the link function in the directive gets called only one.

1. Is there a way to call the link method from the customer questions controller?
2. What are my options to make this happen?
3. Is there a better way of doing this instead of calling the link method?

I'm not sure if you need anymore information, but if you need more information, I will be glad to add more. I have tried using $apply, $watch, $broadcast, looked online, but no luck.

Thanks in advance!

Answer 1

use $rootScope.$boradcast

function(customerQuestionsController, $stateParams, $filter, data, $scope, $rootScope){
    let self = this;

    self.customerQuestions = {
        questions: [],
        sendReply: function(index, conversation_id){
           $rootScope.$broadcast('questionUpdate',index)
        }
    }
 }

in directive

 function($location, $rootScope){
   return {

       restrict: 'E',
       templateUrl: 'custom_sidebar.html',
       replace: true,
       scope: {
         formObject: "="
       },
       link: function($scope, element, attrs) {
          $rootScope.$on("questionUpdate", function(event, data){
              //do something
          });
       }
    }
 }