Nested Angular Controller in a ng-repeat loop

I am attempting to utilize a nested controller within an ng-repeat in order to have the accordion panels on the page function in different scopes. However, I am encountering a problem where the code inside the nested controller is not being executed. I placed a "debugger" stop point at the beginning of the code but it never gets triggered.

Below is the HTML snippet:

<script src="~/Scripts/app/LWS/LWSCtrl.js"></script>
<script src="~/Scripts/app/LWS/lwsService.js"></script>
<script src="~/Scripts/app/Common/commonCtrl.js"></script>
<script src="~/Scripts/app/Common/commonService.js"></script>

<div ng-app-="myModule" ng-controller="LWSCtrl">
<div cg-busy="waitopr"></div>
<tabset>
    <tab heading="Dashboard">
        <div ng-repeat="m in majors">
            <div ng-controller="commonCtrl">
                <accordion close-others="oneAtATime">
                    <accordion-group is-open="status.open">
                        <accordion-heading>
                            <div style="height:20px">
                                <span class="pull-left">{{m.MajorName}}</span><i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-up': status.open, 'glyphicon-chevron-down': !status.open}"></i>
                            </div>
                        </accordion-heading>
...(shortened for brevity)

Here is the complete nested controller code:

angular.module('myModule').controller('commonCtrl', function ($scope, commonService, $, $timeout, $filter, $interval, $window) {
debugger;
$scope.oneAtATime = true;
$scope.status = {
    isFirstOpen: false,
    isFirstDisabled: false
};
getDashboard();
function getDashboard() {
    $scope.waitopr = commonService.getlwsdashboard()
    .success(function (data) {
        $scope.dashboard = data;
        var arr = {};
        for (var i = 0, len = $scope.dashboard.length; i < len; i++) {
            arr[$scope.dashboard[i]['CompanyID']] = $scope.dashboard[i];
        };
        $scope.majors = new Array();
        for (var key in arr) {
            $scope.majors.push(arr[key]);
        }
        angular.forEach($scope.majors, function (value, key) {
            for (var i = 0; i < $scope.dashboard.length; i++) {
                if (value.CompanyID == $scope.dashboard[i].CompanyID) {
                    $scope.majors[key].header = $scope.dashboard[i];
                };
            }
        })
        angular.forEach($scope.majors, function (value, key) {
            $scope.waitopr = commonService.getlegend(value.CompanyID)
            .success(function (data) {
                $scope.majors[key].Legend = data;
                for (var i = 0; i < $scope.dashboard.length; i++) {
                    if (value.CompanyID == $scope.dashboard[i].CompanyID) {
                        $scope.majors[key].MajorName = $scope.dashboard[i].MajorName;
                    };
                }
            });//end success
        });//end forEach
        angular.forEach($scope.majors, function (value, key) {
            for (var i = 0; i < $scope.dashboard.length; i++) {
                if (value.CompanyID == $scope.dashboard[i].CompanyID) {
                    items.push($scope.dashboard[i]);
                };
            }
            $scope.majors[key].items = items;
            items = [];
        })


    });//end success
};

I am puzzled as to why the nested controller code isn't running. Any help would be greatly appreciated!

Answer №1

The controller you are using is connected to an element that is repeated within an ng-repeat directive. If the item being repeated is empty or undefined, the controller will not be triggered.

Make sure that the majors variable is filled and has content in the parent $scope.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using MomentJS along with Timezones to accurately display Datetime while accounting for offsets

I am utilizing moment.js along with timezones to generate a datetime linked to a specific timezone: var datetime = moment.tz("2016-08-16 21:51:28","Europe/London"); Due to the recognition of DST (daylight saving time) by this constructor, moment.js will ...

Retrieve information from the $http response utilizing AngularJS

My Java server generates JSON objects using the following code: @Override public void serialize(Net net, JsonGenerator jg, SerializerProvider sp) throws IOException, JsonProcessingException { try { Set<Place> places = net.getPlaces(); ...

Experimenting with axios.create() instance using jest

I have attempted multiple solutions for this task. I am trying to test an axios instance API call without using any libraries like jest-axios-mock, moaxios, or msw. I believe it is possible, as I have successfully tested simple axios calls (axios.get / axi ...

TypeScript enabled npm package

I am currently developing a npm module using TypeScript. Within my library, I have the following directory structure: . ├── README.md ├── dist │ ├── index.d.ts │ └── index.js ├── lib │ └── index.ts ├── ...

Having trouble getting the Pokemon modal to show both the type and image?

HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>My First JS App</title> <lin ...

What could be causing my bounce animation to begin 50 pixels higher than its intended starting point?

Trying to create a bouncing effect on text Check out my attempt here. It seems like the bug is in this area. @keyframes bounce{ 0%, 40%{ transform:scale(2,.5) translate(0,100px); } 45%,55%{ transform:translate(0,-50px); } 55%, 100%{ ...

Accessing the session object within an Express middleware function is crucial for

This is my unique Express middleware setup: var app = express() .use(express.cookieParser()) .use(express.session({secret: 'HiddenSecret'})) .use(express.bodyParser()) .use(function displaySession(req, res, next) { consol ...

Table Header Stays Put Without Shrinking or Expanding with Window Adjustment

I have a sticky table header that stays at the top when scrolling down on my web page. To achieve this effect, I followed the solution provided on css-tricks.com/persistent-headers/. However, I encountered an issue where the sticky table header does not ...

Tips for extracting and utilizing the values of multiple checked checkboxes in a jQuery datatable

When a button is clicked, I am trying to retrieve the selected values of multiple rows from the datatables. However, with my current code below, I am only able to get the value of the first selected row. function AssignVendor() { var table = $(assig ...

When using Sequelize, I encountered an error message from SQLite stating that the table does not exist despite having created

I am struggling to grasp the concept of how Sequelize operates and I can't figure out why I am encountering the SQLITE_ERROR: no such table: Users error even though I have created the table using sequelize.define. Here is my code: const { Sequelize, D ...

Modify URL parameters in Vue.js based on specific conditions to remove key-value pairs

Currently, I am working on a filter feature where I need to append query parameters to the URL based on user selections. If a user chooses a specific option, I want to modify the query string accordingly. Here's an example of my current URL structure: ...

Tips for passing props while clicking on a v-data-table:

I am currently facing an issue in my app while using v-data-table. I am able to pass props with an extra slot, but I want the entire row to be clickable in order to open a dialog with the prop item: <template v-slot:item.actions="{ item }"> ...

TS2307 Error: The specified module (external, private module) could not be located

I have come across similar queries, such as tsc throws `TS2307: Cannot find module` for a local file . In my case, I am dealing with a private external module hosted on a local git server and successfully including it in my application. PhpStorm is able ...

Showcasing an HTML table using Material-UI

Currently, I have a list of issues being displayed in my browser using the material-ui code below: <Paper className={classes.root} elevation={4}> <Typography type="title" className={classes.title}> All Issues </Typography> ...

Automated user roster refresh

I have an online user list that is dynamically generated using a SQL query on a database table. How can I implement real-time updates to the webpage when a new user logs in? What specific code do I need to include for this functionality? Appreciate any g ...

Capture input before onChange and ideally only accept numerical values

Preparing for inexperienced users, I have a table of input fields. My goal is to enhance user experience and make the form as user-friendly as possible. I have developed code that highlights the table row immediately after an input field has changed. Howe ...

The sorting icon cannot be substituted with jQuery, AJAX, or PHP

Currently, I am working on implementing "sort tables" using ajax, jquery, and PHP. The sorting function is functioning correctly; however, I need to show/hide the "sorting images". At the moment, only one-sided (descending) sorting is operational because I ...

A guide on extracting JSON data from a script tag using Cheerio

I am in the process of extracting metadata from various websites. While utilizing Cheerio to retrieve elements like $('meta[property="article:published_time"]').attr('content') works smoothly for most sites, there are some whe ...

Transforming field names in JSON using AngularJS $resource

I am currently working on an AngularJS project that interacts with data through an API. During the implementation of the 'create' functionality using $resource, I encountered a challenge with naming conventions. While I use camelCase, the API onl ...

Is there a way to execute this process twice without duplicating the code and manually adjusting the variables?

I'm looking to modify this code so that it can be used for multiple calendars simultaneously. For example, I want something similar to the following: Here is what I currently have: This is my JavaScript code: var Calendar = { start: function () ...