Develop Reference

$sce.trustAsHtml is not evaluating a javascript string (or trustAsJs For that matter);

My server has a json endpoint that returns a html/js string, looks similar to such:
"\r\n\r\n<div id=\'myEditor\" name=\"myEditor\">\r\n\r\n\t\t\r\n\t</div>\r\n\r\n\r\n\r\n\r\t<script type=\"text/javascript\" src=\"/MyEditor/WebResource.axd?...\:">\r\n\r\n\t<script>\r\n\t..."
I want to inject this with angular into a div, and have it execute the javascript as well.
First attempt:
function myCtrl ($sce) {
$http.get(endpoint).then(function (response) {
$scope.html = response.data;
$scope.editorHtml = $sce.trustAsHtml($scope.html); //also tried trustAsJs
}
}
html:
<div ng-bind-html="editorHtml"></div>
I noticed that if I return a pure html string those tags get rendered, however a pure javascript tags do NOT get evaluated. How do I get it to evaulate these tags? AngularJS version 1.5.8. Thanks!

Your HTML has some syntax problem such id=\'myEditor\". I replaced it with id=\'myEditor\' and so ...
Check this jsfiddle
Add angular.min.js and angular-sanitize.min.js to your project. I used jquery 2.2.4 for this sample.
HTML:
<div ng-app="myApp">
<div ng-controller="myCtrl">
<h2>{{html}}</h2>
<span>{{greeting}}</span>
<div ng-bind-html="editorHtml"></div>
</div>
</div>
JS:
var myApp = angular.module('myApp', ['ngSanitize']);
var data = "\r\n\r\n<div id=\"myEditor\" name=\"myEditor\">\r\n\r\n\t\thi html\r\n\t</div>\r\n\r\n\r\n\r\n\r\t";
var script = "<script type=\"text/javascript\"> alert('hi script');\r\n\r\n\t</" + "script>\r\n\t";
myApp.controller('myCtrl', ['$sce', '$scope' , function($sce, $scope) {
$scope.html = data + script;
$scope.editorHtml = $sce.trustAsHtml($scope.html);
$scope.greeting = 'Hola!';
}]);

You have to include jQuery for this to work. Also don't forget ngSanitize.
Plunker
http://plnkr.co/edit/zEXXCB459Tp25VJiyyZb?p=preview

Adding a JS Variable to a AngularJS Directory?

I can't seem to get the following code to work:
<script>alert(topic);</script> <!-- Outputs: "dynamics" -->
<div ng-include="'content/' + topic + '.html'"></div> <!-- Does not work. -->
I have deduced the variable is the problem as the following code does work:
<div ng-include="'content/' + 'dynamics' + '.html'"></div> <!-- Works. -->
Does anybody know how I can do this?
Update:
Following Steffen's link, I have written the following code, but still no luck:
<script>
alert(topic); // Outputs "dynamics"
var app = angular.module('myapp', []);
app.controller('MainCtrl', ['$scope', '$window', function ($scope, $window) {
$scope.topic = $window.topic;
}]);
</script>
<div ng-app="myapp" ng-controller="MainCtrl" ng-include="'content/' +
topic + '.html'"></div> <!-- Does not work. -->
Thanks.

Based on Steffen's jsfiddle, here is how I passed a JavaScript variable to AngularJS and used it in defining a directory:
<script>
// Create module.
var app = angular.module('app', []);
// Add controller to module.
app.controller('MainCtrl', ['$scope', '$window', function ($scope, $window) {
$scope.topic = $window.topic;
console.log($scope.topic);
}]);
</script>
<div ng-app="app" ng-controller="MainCtrl" ng-include="'content/' +
topic + '.html'"></div> <!-- Works! -->
Many thanks to all for their answers. :)

try this :
<div ng-include="'content/{{topic}}.html'"></div>
In angularjs , scope variable are access in HTML using The double curly brace notation {{ }} .

Try as follows:
<ng-include src="topic"> </ng-include>
Make sure you have define $scope.topic = "whateveryouwant";
-----------OR-----------
You could do it like:
<ng-include src="getTopic()"></ng-include>
Controller:
function AppCtrl ($scope) {
$scope.getTopic= function () {
return 'partials/whatever.html';
}
}

How to render HTML Tags from ngModel?

I'm using AngularJS for binding JS variables to my HTML content, and it works fine.
JS
var app = angular.module("Tabs", [])
.controller("TabsController", ['$scope', function($scope){
$scope.events = my_JS_object;
})
HTML
<div>{{events.test}}</div>
It works as long as my_JS_object.test is a simple string, like "Hello World", but once I try to put HTML tag in there, such as Hello <b>World</b> It doesn't use the tags as HTML elements, but as simple text. Which makes sense, only I have no idea how to make the HTML tags work.

As stated by Angular documentation, you can use inbuilt ng-bind-html directive to evaluate model string and insert resulting HTML into element.
Example:
If you have model value like:
$scope.myHTML =
'I am an <code>HTML</code>string with ' +
'links! and other <em>stuff</em>';
Use ng-bind-html like:
<p ng-bind-html="myHTML"></p>
For detailed information go through: https://docs.angularjs.org/api/ng/directive/ngBindHtml
Note: Don't forget to inject ngSanitize service in your app.

You need to use the ngBindHtml directive that properly evaluates the expression and inserts the resulting HTML into the element in a secure way. To do this, you must include a reference to angular-sanitize.js in your HTML and then in your angular module, inject ngSanitize.
Like so
var app = angular.module("Tabs", ['ngSanitize'])
.controller("TabsController", ['$scope', function($scope){
$scope.events = my_JS_object;
})
<div ng-controller="TabsController">
<div ng-bind-html="events.test"></div>
</div>
Here is a full working example:
(function(angular) {
'use strict';
angular.module('bindHtmlExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope) {
$scope.myHTML = 'Hello This is <b>BOLD<b/>';
}]);
})(window.angular);
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-sanitize.js"></script>
</head>
<body ng-app="bindHtmlExample">
<div ng-controller="ExampleController">
<p ng-bind-html="myHTML"></p>
</div>
</body>
Refer to the official angular documentation for details:
https://docs.angularjs.org/api/ng/directive/ngBindHtml

If you want to insert HTML into page you shouldn't do it this way.
There is sanitize for this task.
For example in your controller:
$scope.trustedHtml = "<b>Hello World</b>"
And in your html:
<div ng-bind-html="trustedHtml "></div>
Always check html if using a user given text before inserting.
Also don't forget to add ngSanitize as dependency while creating controller

It's easier to use transclusion if you want to embed custom HTML into your DOM tree.
angular.module('myApp', [])
.controller('MainCtrl', function ($scope) {
$scope.overwrite = false;
$scope.origin = 'parent controller';
})
.directive('myDirective', function() {
return {
restrict: 'E',
templateUrl: 'my-directive.html',
scope: {},
transclude: true,
link: function (scope) {
scope.overwrite = !!scope.origin;
scope.origin = 'link function';
}
};
});
<script src="https://code.angularjs.org/1.3.2/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<my-directive>
<p>HTML template</p>
<p>Scope from {{origin}}</p>
<p>Overwritten? {{overwrite}}</p>
</my-directive>
</div>
<script type="text/ng-template" id="my-directive.html">
<ng-transclude></ng-transclude>
<hr />
<p>Directive template</p>
<p>Scope from {{origin}}</p>
<p>Overwritten? {{overwrite}}</p>
</script>
</div>

Simple Angular code not working

HTML
<section ng-app="app">
<table ng-controller="VoicemailsCtrl">
<caption>{{test}}</caption>
</table>
</section>
JS
var app = angular.module('app', [])
.controller('VoicemailsCtrl', ['$scope', VoicemailsCtrl]);
function VoicemailsCtrl($scope, $http)
{
$scope.vms = [1,2,3];
$scope.test = 'this is a test';
}
Can be seen at:
http://jsfiddle.net/tx9nbo8g/6/

You missed adding
ng-app="app"
in the section.
Check the updated fiddle
Fiddle
Apart from this you need to add
angular 1.2.1
and
No wrap in head
in framework and extension.
.

Please find below working code :
Html:
<body ng-app="app">
<section>
<table ng-controller="VoicemailsCtrl">
<caption>{{test}}</caption>
</table>
</section>
</body>
Js:
var app = angular.module('app', []);
app.controller('VoicemailsCtrl', ['$scope','$http',VoicemailsCtrl]); //You forgot to add $http
function VoicemailsCtrl($scope, $http) {
$scope.vms = [1,2,3];
$scope.test = 'this is a test';
}
http://plnkr.co/edit/qCsG4WzFc0Irt2RobLoC?p=preview

Add ng-app="app" on section element & also you need to change the script loading option inside your fiddle from OnLoad to No Wrap in <head/>
Markup
<section ng-app="app">
<table ng-controller="VoicemailsCtrl">
<caption>{{test}}</caption>
</table>
</section>
Working Fiddle

Your HTML should have to be changed. You need to tell angular where app is starting. Default ng-app is also a valid app declaration.
<section ng-app="MyApp">
<table ng-controller="VoicemailsCtrl">
<caption>{{test}}</caption>
</table>
</section>
In controller
angular.module('MyApp', [])
.controller('VoicemailsCtrl', ['$scope', function ($scope){
$scope.vms = [1,2,3];
$scope.test = 'this is a test';
}]);
fiddle
You should not use global declaration of controller. Its been deprecated in angular 1.3+ versions. You should use controller directive to declare a controller.

Angularjs and web services

<div ng-app="myapp" ng-controller="hello">
<script>
function Hello($scope, $http) {
$http.get('http://rest-service.guides.spring.io/greeting').
success(function(data) {
$scope.greeting = data;
});
}
</script>
and I would like to print the content like this {{greeting.id}}.
the code snippet is going to get data in JSON format from "http://rest-service.guides.spring.io/greeting" using angularjs. This isn't working in eclipse. Any ideas to make it work ?

I'm fairly certain that the value of ng-controller is case sensitive.
So, this:
ng-controller="hello"
will look for a function with the name: hello, not Hello.
Here is a plunker demonstrating the issue.

Change your controller code like this.
(function () {
var myApp = angular.module('myModule');
myApp.controller('hello', ['$scope', '$http', function ($scope, $http) {
$http.get("http://rest-service.guides.spring.io/greeting").then(function(data){
$scope.greeting=data;
});
}]);
})();
and in the html
{{greeting.data.id}}
I checked it in plunker. It is working fine