How to make output data dynamic structure using AngularJS?

I'm new in angularJS and making a simple app, but I am finding it difficult to create output with dynamic data.

Here my html -

<div ng-app="MyApp">
  <div ng-controller="TabsDemoCtrl">
    <div ng-controller="TabsDemoCtrl">  
      <h1> How to make output dynamic data like this?</h1>
      <table ng-repeat="customize in data">
        <tr>
          <th colspan="2">{{customize.product.name}}</th>
        </tr>
        <tr>
          <td colspan="2">Assets</td>
        </tr>
        <tr>
          <td>{{ How to bind ouput dynamic attribute data ? }}</td>
          <td>{{ How to bind ouput dynamic subattribute ? }}</td>
        </tr>
      </table>

    </div>
  </div>
</div>

and here my JS -

angular.module('MyApp', [
    'ui.bootstrap']);

(function(MyApp) {
  'use strict';
  MyApp.controller('TabsDemoCtrl', ['$scope', function($scope) {
    // categories
    $scope.data = [
    {
        product : {
            name  : 'Product 1'
        },
        assets : {
            color : {
                black : '/file/6d2ceb60-257b-47e6-9db0-3a2299ff75f2.png'
            }
        }
    },
    {
        product : {
            name  : 'Product 2'
        },
        assets : {
            soles : {
                black : '/file/840ec1ff-6d27-40af-b4ca-277aa09ad147.png',
                red : '/file/1970f2e2-b7a0-439c-98d9-b9ea1604c227.png'
            },
            material : {
                black : '/file/aebe8f68-60fd-4fda-bd46-00e80f190ba2.png',
                green : '/file/e225e20d-5b97-4a60-8337-0551064a8d8c.png'
            },
            lining : {
                blue : '/file/6d2ceb60-257b-47e6-9db0-3a2299ff75f2.png',
                red : '/file/280fecb5-ebe5-47cb-85f4-4d1bf6dd8ed0.png'
            }
        }
    }
];


  }]);
})(angular.module('MyApp'));

I tried to make an output of dynamic structure data in this link demo but it doesn't show.

So how to make view with this dynamic data ?