Insert HTML with AngularJS code inside

If you're looking for a 'Hello World' kind of example, this is probably as basic as it gets.

https://code-maven.com/hello-world-with-angular-controller

In angular it could look something like:

html

<div ng-app="app" class="container" ng-init="cliclink=false; qty=1; cost=2">
  <span class='btn' ng-click="clicklink=!clicklink">click here</span>
<div name="content" id="content" ng-if="clicklink===true">
    <b>Total:</b> {{qty * cost | currency}}
</div>
</div>

js

No js.

But it's so much more to be done...

Maybe the example doesn't make sense, but here is the thing maybe exist another way to do that. I have a project with c# MVC and for render some Views I use ajax

Javascript to load modal into View:

function Edit(){
$.ajax({
                    url: '../Controller_/Action_',
                    type: 'POST',
                    datatype: "html",
                    traditional: true,
                    data: { data1: data1 },
                    success: function (result) {                        
                        $('._container').html(result);
                    },
                    error: function (result) { }
                });
}

MVC c# code:

public ActionResult Edit()
{
  ...\ code \...
    return PartialView("/View/_Edit", model);
}

View Main:

<a href="#" data-toggle="modal" data-target="#_editModal" onclick="javascript:Edit(1, 'new')">Open Modal</a>
<div name="_container">
 <!-- Here load body of modal -->
</div>

Partial view (Edit) return by Action (Edit) in Controller . Should be a modal structure:

<div name="_editModal">
@html.LabelFor( x => x.Name)
@html.EditorFor( x => x.Name)
<div ng-app ng-init="qty=1;cost=2">
            <b>Invoice:</b>
            <div>
                Quantity: <input type="number" min="0" ng-model="qty">
            </div>
            <div>
                Costs: <input type="number" min="0" ng-model="cost">
            </div>
            <div>
                <b>Total:</b> {{qty * cost | currency}}
            </div>
        </div>
</div>

As already stated by a bunch of people in the comments and other answers this is absolutely bad practice. But there is also a built-in option to solve your problem with pure AngularJS using $compile.

In order to make that work you need to place everything inside a controller or directive and inject the $compile service accordingly.

You need to use the $compile service to produce a function of your dynamic HTML markup which is able to consume a scope object as a parameter in order to produce a working AngularJS template.

After inserting your template, you need to trigger the AngularJS digest cycle using $apply.

<div class="container" ng-controller="MyController">
  <span class='btn' ng-click="clicklink()"">click here</span>
<div name="content" id="content">
</div>
</div>


<script>

app.controller("MyController", function($scope, $compile) {
    var template = "<button ng-click='doSomething()'>{{label}}</button>";
    $scope.clicklink = function(){
        $scope.apply(function(){
            var content = $compile(template)($scope);
            $("#content").append(content);
        });
    }
});

</script>