generating with angularJS HTML from JSON-Objects

I'm developing an app with the Ionic framework based on angularjs. I'd like to let generate HTML elements or components from a JSON file. These are buttons, lists, labels, etc.

My JSON objects look like this:

[
  {
    "category": "communicationPage",
    "type": "Button",
    "id": "communicationButton",
    "icon": "ion-chatboxes",
    "name": "Communication",
    "onClick": "window.location.href='communicationPage.html'",
    "ngclick": "open()",
    "ngcontroller": "openctrl",
    "color": "white",
    "background-color": "#ff5db1",
    "font-size": "20px"
  },
  {
    "category": "servicePage",
    "type": "Button",
    "id": "serviceButton",
    "icon": "ion-briefcase",
    "name": "Service",
    "onClick": "window.location.href='servicePage.html'",
    "color": "blue",
    "background-color": "#009900",
    "font-size": "26px"
  }
]

I can access via my Controller on the JSON file and parse as follows:

myApp.controller('generateHTMLCtrl', function ($scope, $http) {
    $http.get('myJSONFile.json').success(function(data){
        $scope.components = data;
        //...
    });
});

The code translates of course nothing.

  1. My question is, how can I adapt my JavaScript code so that from a
    JSON object following HTML element is generated?:

<button style="color: blue; background-color: #ff5db1; font-size: 20px" onclick="window.location.href='communicationPage.html'" id="communicationButton" class="button"> <i class="ion-chatboxes"></i> <br> Communication </button>

Once my JSON object is located always in the JSON file, should always be created the HTML element on the page.

  1. The second question is how I can position this generated HTML element just in my HTML page?

I want that the HTML element is generated between the responsive grid element, such as:

 <div class="row responsive-sm">
    <div class="col">
      <!-- The Button should be generated hier-->
    </div>
 </div>
  1. The third and final question is how I can let generate the HTML element on the appropriate page? Such as: If in JSON object the key-value pair of "category": "communicationPage" occurs should the corresponding HTML element be created on 'communicationPage.html'

I would look forward to an example. Many thanks.

For the two first point, use the data-binding and ng-repeat : directive

<div class="row reponsive-sm" ng-controller="generateHTMLCtrl">
     <div ng-repeat="component in components">
       <button style="color : {{component.color}}; background-color : {{component.background-color}} ... ">
       </button>
     </div>
</div>

For the last point, I'm not sure if it's possible with AngularJS ...