title: angularjs and brackets live preview: The simplest code doesn't work
body: <p>I'm a newbie to angularJS and I'm trying to make the simple thing to work but I fail.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="main.js"&gt;&lt;/script&gt;
          &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" href="main.css"&gt;
    &lt;/head&gt;
    &lt;body ng-app="app" ng-strict-di&gt;
      &lt;div class="test" ng-controller="testSrc"&gt;
        &lt;p&gt; {{ blah }} &lt;/p&gt;
        &lt;img ng-src="{{ URLImage }}"/&gt;
        &lt;button class="btn btn-sucess" ng-click="goYahoo()"&gt;Yahoo&lt;/button&gt;
        &lt;button class="btn btn-sucess" ng-click="goGoogle()"&gt;Google&lt;/button&gt;      
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var app = angular.module("app", []);
  
  app.controller('testSrc', ['$scope,$location', function ($scope, $location) {
    "use strict";
    $scope.blah = "blah blah";
    $scope.URLImage = 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/512px-Google_%22G%22_Logo.svg.png';
  
    $scope.goGoogle = function () { $location.url('localhost:58164/g'); };
    $scope.goYahoo = function () { $location.url('localhost:58164/y'); };
  }]);
  
  app.config(function ($routeProvider) {
    "use strict";
    $routeProvider
    .when('/', {
      templateUrl : 'index.html'
    })
    .when('/g', {
      templateUrl : 'http://www.google.com'
    })
    .when('/y', {
      templateUrl : 'http://www.yahoo.com'
    });
  });    
  </code></pre>
  
  <p>The code has passed all lint warnings. I use the live preview of brackets that opens up Internet explorer. I encounter 3 issues:</p>
  
  <p>1) {{ blah }} does not translate into blah blah, I see {{ blah }} as if the js is ignored. same for the ng-src of the img. It is ignored and I don't see the image.</p>
  
  <p>2) the 2 buttons are not colored in green as I expect it to be from the bootstrap css. I tried it in jsFiddle and did see them as green but when I tried again now, they were regular, not sure what did I do wrong.</p>
  
  <p>3) Routing: I want to browse to Google/Yahoo when navigating to specific url g and y using the 2 buttons. When I open the live preview, the url is: <a href="http://127.0.0.1:58164/index.html" rel="nofollow">http://127.0.0.1:58164/index.html</a> so how can I route this correctly? <a href="http://127.0.0.1:58164/index.html/g" rel="nofollow">http://127.0.0.1:58164/index.html/g</a> won't work.</p>
  
  <p>I'm kinda lost here, not sure if the problem is my code, the browser of the live preview though the JS didn't work also in jsFiddle...</p>