title: How to dynamically add components in AngularJS?
body: <p>Tell me please, how to create component in controller?</p>
  
  <p>I have angularjs module with controller</p>
  
  <pre><code>let app = angular.module('testApp', []);
  </code></pre>
  
  <p>And i try to load component but it is not load.</p>
  
  <pre><code>app.controller('MainCtrl', ["$scope", function($scope) {
    // I have an array with objects.
    let arr = [{name: 'firstComponent', component: {
        template: "&lt;div&gt;tech filter component&lt;/div&gt;",
        controller: [() =&gt; {
          let $ctrl = this;
        }]
    }}];
    angular.forEach(arr, (itemArr) =&gt; {
      // Why it doesn't init from here ?
      app.component(itemArr.name, itemArr.component)
    });
  }]);
  </code></pre>
  
  <p>And it is my html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;angularjs component&lt;/title&gt;
  &lt;/head&gt;
  &lt;body ng-app="testApp" &gt;
  &lt;div ng-controller="MainCtrl"&gt;
    &lt;first-component&gt;&lt;/first-component&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/6vh6csy8/13/" rel="nofollow noreferrer">jsfiddle link</a></p>