JavaScript, заполнение многомерного массива

У меня есть массив такого вида:

$array = [
  "name" => "Морквяний салат з кальмарами",
  "cookingTime" => "20",
  'ingredients' => [
      '300гр кальмарів',
      '3 моркви',
  ],
  'steps' => [
      ['n' => 'Відваріть моркву.', 't' => 20],
      ['n' => 'Очистіть моркву, охолодіть і натріть на терці.', 't' => 0],
      ['n' => 'Зваріть яйця і наріжте їх кубиками.', 't' => 0],
  ]
];

Я заполняю его на UI с помощью Angular 1.6.9, потом конвертирую в json и с помощью Ajax передаю в php и он вставляется.

У меня вышло заполнить ингредиенты:

$scope.recipeArray['ingredients'] = $scope.ings 

Но ни в какую не выходит заполнить steps.
Пробовала по-разному:

$scope.recipeArray['steps'] = [$scope.steps];
$scope.recipeArray['steps'] = {'n':$scope.steps};
$scope.recipeArray['steps'].name = $scope.steps;

Но не выходит.