Why doesn't ng-click work when generating html when from a jQuery function?

Question

JavaScript

for (var i = 0; i < categories.length; i++) {
                if (categories[i]=="Home") {
                    $("#categoryNav").append("<a class=\"btn btn-primary\"  ng-click=\"app.changeList('')\">" + categories[i] + "</a>");
                }
                else {
                    $("#categoryNav").append("<a class=\"btn btn-primary\"  ng-click=\"app.changeList('" + categories[i] + "')\">" + categories[i] + "</a>");
                }      
            }

Generates buttons, each of which calls a method in the angularjs controller:

app.controller("ProductsController", function ($http) {
        var goga = this;
   goga.changeList = function (category) {
            $http.get('/api/DataService/' + category)
                 .success(function (results) {
                     goga.products = results;
                 });
        };
    });

But when you click on the button, nothing happens, i.e. the method call is not made. However, if you create a button manually and set a parameter when calling the goga.changeList('Soccer') method, then the call occurs. The code of a button written by hand and the code generated by a function do not differ. What is the problem?

An example of a button created manually:

<a class="btn btn-primary" ng-click="app.changeList('Soccer')">TEST</a>

Answer 1

Most likely the problem is not in the correct sequence of script execution, i.e. angular is initialized faster than jquery generates buttons.
You are clearly using angular incorrectly and the buttons need to be built using angular.

Answer 2

Are you using noConflict()? And then you can’t say so in your code. jQuery and angular don't get along

Answer 3

Angular has a provider called $compile. https://docs.angularjs.org/api/ng/service/$compile