get rangeError Maximum call stack size exceeded

Question

I have a dropdown with a checkbox that its values is an object. (see attached)

Each time I select an object there is a watch which pastes this new values (which is an array of selected objects) to another object that display it in a directive (binding) -- tiles

$scope.$watch('skills', function(newVal, oldVal) {
        if (newVal) {
            console.log('changed!!! old value: ' + oldVal + '  new val  ' + newVal);
            if (newVal === undefined) {
                return;
            }
            $scope.tiles = _.cloneDeep(newVal);
        }
    }, true);



angular.module('dsadad')
    .component('tiles', {
        templateUrl: 'tile.tpl.html',
        bindings: {
            tiles: '<',
            onDelete: '&?'
        },
        controller: function ($state, _, $scope, $log, Utils, $translate, moment) {
            'use strict';

            var $ctrl = this;

        }
    });

I get: rangeError Maximum call stack size exceeded

for some reason one of the value of the array of selected objects is an array also instaed of an object as you can see....

Answer 1

Your issue is most likely here $scope.tiles = _.cloneDeep(newVal);

if newVal has a reference to itself, it will recursively try to clone, until you end up with a stackoverflow.

eg You probably have a circular object structure like this:

const objectB = {
  id: 'B',
  otherData: null;
};
const objectA = {
  id: 'A',
  otherData: objectB;
};
objectB.otherData = objectA;
_.deepClone(objectB) // This will blow up due to the circular reference

Otherwise, newVal is nested so deep that it causes the issue. Eg

const objectA = {
  a: {
    b: {
      c: {
        // etc. etc.
      }
    },
  }
};

To fix this, you can either remove this circular reference from your data structure, or you can do a shallow copy if it suits your data needs by doing {...newVal}