Generating a list of menus with AngularJS
Simple answer, no it's not OK this way, you are totally misusing the angular.js purpose.

Anugular.js is a framework in which follows a modular pattern, it was designed by the time web wasn't so rich as nowadays so lots of things in the framework are native behavior today's days, it starts always with a module, like so:

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


As you have your module declared, it can be triggered by the ng-app="MyApp" directive, which bootstraps your module in the element you embedded the ng-app attribute into (i.e., it starts an angular.js app in that element) or you can bootstrap it manually using angular.bootstrap(document, ['MyApp']) when the DOM is ready.

I've made an acceptable way of using angular.js with your example and you can check this in the example bellow.



angular.module('MyApp', [])
  .controller('MainCtrl', function($scope) {
    $scope.links = [
      { ref: "./link1.html", content: "First link of the menu" },
      { ref: "./link2.html", content: "Second link of the menu" },
      { ref: "./link3.html", content: "Third link of the menu" }
    ];
  });
&lt;div ng-app="MyApp" ng-controller="MainCtrl"&gt;
  &lt;ol class="list-group"&gt;
    &lt;li class="list-group-item" ng-repeat="x in links"&gt;
      &lt;a href=' {{ x.ref }} '&gt; {{ x.content }} &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ol&gt;
&lt;/div&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"&gt;&lt;/script&gt;




However, the modern way of doing modern web apps these days is using the concept of WebComponents, concept in which angular.js supports since version 1.5.0.

In the snippet bellow, I provided the component approach of your example.


  Disclaimer: You seem not to have understood angular.js' concept properly, so, I don't know where you've been studying angular.js, but I really recommend the angular.js guide which covers pretty much everything you need to know about concepts, architecture, features, etc.




angular.module('MyApp', [])
  .component('app', {
    template: `
      &lt;ol class="list-group"&gt;
        &lt;li class="list-group-item" ng-repeat="x in $ctrl.links"&gt;
          &lt;a href=' {{ x.ref }} '&gt; {{ x.content }} &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ol&gt;
    `,
    controller: function() {
      this.links = [{
          ref: "./link1.html",
          content: "First link of the menu"
        },
        {
          ref: "./link2.html",
          content: "Second link of the menu"
        },
        {
          ref: "./link3.html",
          content: "Third link of the menu"
        }
      ];
    }
  });
&lt;div ng-app="MyApp"&gt;
  &lt;app /&gt;
&lt;/div&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"&gt;&lt;/script&gt;