How to insert html into a view (Mini-challenge 6)

Mini-Challenge 6

ng-challengeAngularJs Mini-Challenges is a growing collection of “Challenges” about the most quirky parts of the AngularJs framework. It encourage you to find and fix common mistakes and subtle bugs, as well as performance issues and bad practices, that non-expert AngularJs programmers may encounter on their endeavours into the depths of the framework.

AngularJs Mini-Challenges does not aim to teach you AngularJs. Former knowledge of the Framework is strongly recommended in order to understand the topics covered in this Challenges. In order to learn the basics of the Framework, please head over to this excellent book:

 

book

Book Tip

ng-book – The Complete Book on AngularJS
Ready to master AngularJS? What if you could master the entire framework – with solid foundations – in less time without beating your head against a wall?


Amazon

 

The Challenge:

The requirement is that part of the HTML that needs to be rendered in the view, should be processed/created in the controller, and then rendered in the html view.

This challenge is about to insert html into a variable in the controller, and then print the html in the view, the method described below is not working, the challenge is for you to find a solution. See code example below:

View:

<div>{{html}}</div>

Controller:

    function myController($scope) {

       $scope.html = "<b>HTML inseted</b>";
};

see jsfiddle: https://jsfiddle.net/s03cauau/8/

Here you can find a possible solution

If you feel that the solution is poor or incomplete or there is room for improvement, please share with every one, you can leave a comment.