I am facing an issue with my Angular code where I am trying to have multiple instances of the same Controller on a single web page. However, whenever a new instance is created, it replaces all other properties on the instance object instead of adding itself. This seems to be a JavaScript syntax problem rather than an Angular issue. Can anyone provide any guidance or advice?
angular.module('mean.root').controller('ContentA1Controller', ['$scope', '$location', 'Global', 'Data', '$timeout', '$interval', 'Clients', 'Modals', '$element', function ($scope, $location, Global, Data, $timeout, $interval, Clients, Modals, $element) {
// Defaults
$scope.instances = { A: {}, B: {}, C: {}, D: {}, E: {}, F: {} };
// Methods
$scope.createNewInstance = function() {
var instance = $($element).closest('.content-container').attr('id');
// Add ID to content
$($element).find('.content').attr( "id", "contentA1instance"+instance );
Data.priceByDay(function(prices){
// Load Chart Data
$scope.instances[instance].data = [1,2,3,4,5];
// Log Instance Object
console.log($scope.instances);
When I add one instance to the controller, everything works and I get this log:
$scope.instances = { A: { data: [1,2,3,4,5] }, B: {}, C: {}, D: {}, E: {}, F: {} }
However, when I add another instance by running createNewInstance() again, the log shows:
$scope.instances = { A: {}, B: { data: [1,2,3,4,5] }, C: {}, D: {}, E: {}, F: {} }