Q:

How can I get programmatic markup into my Angular page?

In my Angular app (1.4) I have a control in a grid that could be one of several kinds, and so I created a javascript function to do the logic and spit out the markup that should go in.
However it doesn't work correctly. The markup will render, but none of the Angular hooks seem to be in it.  In my limited understanding I think the reason has something to do with this digest cycle/timing.  I also suspect my code ought to be in a directive, but not sure.
I've created a plunk that demo's this problem. https://plnkr.co/edit/nuxFzqN0n6XgSHqmC6jK?p=info  Here is the markup. Visit the plunk to see the js and run it:
<body ng-controller="MainCtrl">
  <div>Button1:    <input type="button" value="Button 1" ng-click="button1click()"/><span ng-show="showButton1Result">BUTTON 1 CLICKED!</span></div>
  <div>Button2:    <span ng-bind-html="button2Markup()"></span></div>
  <div>Button3:    {{ button3Markup }}</div>
</body>

You get the idea.  What is the best approach here?

A:

This was answered elsewhere: Programmatic Angular Templates?
A directive is what you want to use:
<div>Button 2: <div programatic-button="button2Markup()"></div></div>
<div>Button 3: <div programatic-button="button3Markup"></div></div>

.directive('programaticButton', function($compile) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var html = scope.$eval(attrs.programaticButton);
      var newElement = $compile(html)(scope);
      element.append(newElement);
    }
  };
});

https://plnkr.co/edit/YGDOmtdfgQMfy0jnNVI4?p=preview

