HighCharts is undefined because multiple Html pages in Javascript file

Question

I'm trying to get a div id called "container" like this:

var chart = $(#container).highcharts();

It works perfectly when I call by a controller that is defined in my html page. But When I try to call this function by another controller which is not referred by my Html page, it isn't working.

SO, How can I call my div inside other controller which is associate in other html page?

Example:

It works and is defined in my controller "main" which is defined in my html page "main.html"

    Item.Rest("datePerUser",null).then(function(totalDatePerUser){

        var objectDate = totalDatePerUser.data;

        var femDate = objectDate.Chart1Fem;
        var mascDate = objectDate.Chart1Masc;    

        loadDataChart1(mascDate, femDate);            

    });

It isn't work and is defined in my controller "menu" which is defined in my html page "menu.html"

    PeriodItem.Rest("datePerUser_",Obj).then(function(datePerUserTeste){

                      var objectDate = datePerUserTeste.data;

                      newFemDate = objectDate.Chart1Fem;
                      newMaleDate = objectDate.Chart1Masc;    

                      loadDataChart1(newMaleDate, newFemDate);

                  }); 

A both call the follow function

function loadDataChart1(dataMale, dataFem){

    var chartProfiles = $('#container').highcharts();

    obj_female =  JSON.parse('{ "data":' + dataFem + ' }');
    obj_male =  JSON.parse('{ "data":' + dataMale + ' }');

    chartProfiles.series[0].update(obj_female);    
    chartProfiles.series[1].update(obj_male);

} 

Just to information, I'm using angularJS with Rest Service, to get data from DB, and I have multiple Html pages.

Answer 1

A super simple option for your case is a 'common' controller with 'loadDataChart1' functionality.

//Step 1 
app.controller('CommonChartsController', function($scope) {
    $scope.createCharts = function (dataMale, dataFem) {    
      var chartProfiles = $('#container').highcharts();

      obj_female =  JSON.parse('{ "data":' + dataFem + ' }');
      obj_male =  JSON.parse('{ "data":' + dataMale + ' }');

      chartProfiles.series[0].update(obj_female);    
      chartProfiles.series[1].update(obj_male);
  };      
}
               
//Step 2
app.controller('MainController', function($scope, $controller) {

    $controller('CommonChartsController', {
        $scope: $scope               
    });

    Item.Rest("datePerUser",null).then(function(totalDatePerUser){
        var objectDate = totalDatePerUser.data;

        var femDate = objectDate.Chart1Fem;
        var mascDate = objectDate.Chart1Masc;    

        $scope.createCharts(mascDate, femDate);            
    });
}

//Step 3
app.controller('MenuController', function($scope, $controller) {

    $controller('CommonChartsController', {
        $scope: $scope               
    });

    PeriodItem.Rest("datePerUser_",Obj).then(function(datePerUserTeste){
      var objectDate = datePerUserTeste.data;

      newFemDate = objectDate.Chart1Fem;
      newMaleDate = objectDate.Chart1Masc;    

      $scope.createCharts(newMaleDate, newFemDate);
    }); 
}