Using basic REST API in Angular 1.x

Question

I have built real-time markdown editor in order to learn AngularJS by practice. I think what I'm trying to do can be done a better way. Any suggestions appreciated. Here's my code:

var myApp = angular.module('myApp',[]);
myApp.factory('Data',function ($window) {
    return {message: $window.localStorage['stuff']}
});

function FirstCtrl($scope,$window,Data){
    $scope.data = Data;
    $scope.$watch(
        "data.message",
        function (newval,oldval){
            $window.localStorage['stuff'] = newval;
        })
}

function SecondCtrl($scope,$location,$element,$compile,Data){
    $scope.data = Data;
    $scope.location = $location;
    $scope.compile = function( newHTML ) {
        newHTML = $compile(newHTML)($scope);
        $element.html('').append(newHTML);
    };

    $scope.$watch("data.message", function (newval, oldval) {
        var $http = angular.injector(["ng"]).get("$http");
        $http.post('http://api.github.com/markdown/raw?access_token=' + $scope.location.$$absUrl.substring($scope.location.$$absUrl.indexOf("=")+1),
            newval,
            {headers:{'Content-Type':'text/plain'}})
        .then(function(res){
            $scope.data.dddd = res.data;
            //console.log($scope.data.dddd);
            if(!$scope.data.dddd) return;
            $scope.compile($scope.data.dddd);
        });
    })
}

Answer 1

$scope.$watch(
    "data.message",
    function (newval,oldval){
        $window.localStorage['stuff'] = newval;
    })

Not entirely sure why this is formatted this way. Looks odd. Also, you use double and single quotes. They don't really matter for JS strings, but for consistency, use one of the two. I usually recommend single quotes because they're cleaner-looking.

$scope.$watch('data.message',function (newval,oldval){
  $window.localStorage['stuff'] = newval;
});

More compact, less weird. :D

I notice you use Github-flavored markdown but that entails sending it over the wire and waiting for a response. That's a slight overhead plus it heavily relies on a service that may go down any time. I suggest you look for an offline library. I suppose there is one for Github-flavored (MarkdownPad supports such) but other libraries could come close.

Naming could also need rework. FirstCtrl and SecondCtrl don't really tell me anything about the controllers without reading their code (which is the first sign of terrible code, having to read everything). The first controller could be Editor because it has your text area binding while the second could be GitHubMarkdownRederer because that's what it does.

I don't see why you need to compile the markup before appending it to the DOM. It doesn't require Angular facilities. You can simply pop it in as HTML in the DOM.

Appending arbitrary markup on the current is dangerous. What editors like jsFiddle do is host the renderer in a totally different domain and render it on the page using an iframe. That way, built-in browser security takes care of the rest, preventing inter-domain, inter-frame communication. There are other options out there, not sure which one is best for the situation.