How to add items to nested array - angularjs - asp.net

Question

This is the structure of nested array:
$scope.History = [
{
isCustomer:false,
userText:"some text",
options:[]
}
The array with data:
//The text in DisplayLabel will be the same for all the objects.
$scope.Categories = [
{ "QuestionId": 1, "QuestionName": "Complaint", "DisplayLabel": "what is it?" },
{ "QuestionId": 2, "QuestionName": "Registration", "DisplayLabel": "what is it?" }
];
Desired Array:
$scope.History = [
{
isCustomer:false,
userText:"what is it?",
options:["Complaint","Registration"]
}
Normally I would do this for a 1D array
angular.forEach($scope.Categories, function (value, key) {
$scope.History.push(false,value.DisplayLabel);
Now, how to add items to 'options' for an object.
EDIT:
I tried this but no luck. Doesn't display any data
var optionsData = [];
var userText = "";
angular.forEach($scope.Categories, function (value, key) {
optionsData.push(value.QuestionName);
userText = value.DisplayLabel;
})
$scope.History.push(false,userText,optionsData);

Answer 1

var app = angular.module('app', []);
app.controller('homeCtrl', function($scope) {
$scope.History = [{
isCustomer: false,
userText: "some text",
options: []
}]
$scope.Categories = [{
"QuestionId": 1,
"QuestionName": "Complaint",
"DisplayLabel": "what is it?"
}, {
"QuestionId": 2,
"QuestionName": "Registration",
"DisplayLabel": "what is it?"
}];
var optionsData = []
angular.forEach($scope.Categories, function(value, key) {
$scope.History[0].options.push(value.QuestionName)
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
<div ng-controller="homeCtrl">
<pre>{{History | json}}</pre>
</div>
</div>