Untitled

<!DOCTYPE html>
<html ng-app="myApp">

  <head>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="myController">
    <div>Parents name:
      <ul ng-repeat="name in parentsName">
        <li>{{name.name}}</li>
      </ul>
    </div>
    <div>Children name:
      <ul ng-repeat="name in childName">
        <li>{{name.childName}}</li>
        <li>Parent Name: {{name.parentName}}</li>
      </ul>
    </div>
  </body>

</html>

// Code goes here

var app = angular.module('myApp', []);

app.factory('dataFac', function(){
return {
    parents : [{
        name: 'George',
        age: 44,
        children: [{
            name: 'Jack',
            age: 16
        },{
            name: 'Amy',
            age: 13
        }]
    }, {
        name: 'Jimmy',
        age: 38,
        children: [{
            name: 'Max',
            age: 7              
        },{
            name: 'Lily',
            age: 5
        },{
            name: 'Kim',
            age: 4
        }]
    }]
}});

app.controller('myController', function($scope, dataFac) {
  $scope.data = dataFac.parents;
  $scope.parentsName = [];
  $scope.childName = [];
  //here I'd like to get name of parents
  angular.forEach(dataFac.parents, function(parent) {
    $scope.parentsName.push({
      name: parent.name
    });
    angular.forEach(parent.children, function(child) {
      //here I'd like to get name of children
      
      $scope.childName.push({
        childName: child.name,
        parentName: parent.name
      });
    });
  });
});

/* Styles go here */