My Property editor

controller.js

/*This is based around the uSEO-Pro property editor (massive tribute to be given once finished)*/

angular.module("umbraco")
    .controller("myNamespace.mySeoController",
    function ($scope, editorState, entityResource, contentEditingHelper, $http, $rootScope) {

        var htmlAlias = $scope.model.config.htmlAlias;
        $scope.disableKeyword = $scope.model.config.disableKeyword === true;
        $scope.staticTitle = $scope.model.config.staticTitle;
        var url = editorState.current.urls[0];
       

        $scope.isRoot = url === '/';
        $scope.model.hideLabel = true; 

        $scope.title = $scope.model.value.title;
        $scope.pageName = editorState.current.name;        

        $scope.targetKeyword = $scope.model.value.targetKeyword;
        $scope.keywords = $scope.model.value.keywords;
        $scope.description = $scope.model.value.description;

        $scope.boolDescription = false;
        $scope.boolTitle = false;
        $scope.boolUrl = false;
        $scope.boolHeading = false;

        $rootScope.$watch(htmlAlias, function () {
            $scope.SeoStatsView(true);
        });

        $scope.$watch("title", function () {
            $scope.UpdateModel();
            $scope.SeoStatsView(false);
        });

        $scope.$watch("keywords", function () {
            $scope.UpdateModel();
        });

        $scope.$watch("targetKeyword", function () {
            $scope.UpdateModel();
            $scope.SeoStatsView(true);
            $scope.KeywordSuggestions($scope.targetKeyword);
        });

        $scope.$watch("description", function () {
            $scope.UpdateModel();
            $scope.SeoStatsView(false);
        });

        
        $scope.SeoStatsView = function (evaluateHtml) {
            if ($scope.disableKeyword == false) {
                if ($scope.targetKeyword) {
                    var tk = $scope.targetKeyword.toLowerCase();
                    if (tk.length > 2) {
                        if ($scope.title != null && $scope.title.length > 0) {
                            $scope.boolTitle = $scope.title.toLowerCase().indexOf(tk) >= 0;
                        }
                        else {
                            $scope.boolTitle = $scope.pageName.toLowerCase().indexOf(tk) >= 0;
                        }

                        if ($scope.description) {
                            $scope.boolDescription = $scope.description.toLowerCase().indexOf(tk) >= 0;
                        }
                        $scope.boolUrl = url.toLowerCase().indexOf(tk) >= 0;

                        
                    }
                }
            }
        }
        $scope.SeoStatsView(true);


        $scope.UpdateModel = function () {
            
            $scope.model.value = {
                title: $scope.title,
                targetKeyword: $scope.targetKeyword,
                keywords: $scope.keywords,
                description: $scope.description
            
            };

        };

        $scope.KeywordSuggestions = function (keyword) {
            if (keyword != null && keyword.length > 1) {
                var lang = $scope.model.config.keywordLanguage;
                if (lang == null || lang === "") {
                    lang = "en";
                }
                $.getJSON("http://suggestqueries.google.com/complete/search?callback=?",
                                {
                                    "hl": lang, // Language                  
                                    "jsonp": "suggestCallBack", // jsonp callback function name
                                    "q": keyword, // query term
                                    "client": "youtube" // force youtube style response, i.e. jsonp
                                }
                            );
                suggestCallBack = function (data) {
                    var suggestions = [];
                    $.each(data[1], function (key, val) {
                        suggestions.push(val[0]);
                    });
                    if (suggestions.length > 5) {
                        suggestions.length = 5; // prune suggestions list to only 5 items        
                    }
                    for (var k = 0; k < suggestions.length; k++) {
                        console.log(suggestions[k].value);
                    }
                    $scope.GoogleSuggestions = suggestions;
                };
            }
            else {
                $scope.GoogleSuggestions = [];
            }
        };

        $scope.GetUrl = function () {

            return $scope.ProtocolAndHost() + $scope.GetParentContent().urls[0];

        };

        $scope.ProtocolAndHost = function () {

            var http = location.protocol;
            var slashes = http.concat("//");
            return slashes.concat(window.location.hostname);

        };

        $scope.GetParentContent = function () {
            var currentScope = $scope.$parent;

            for (var i = 0; i < 150; i++) {
                if (currentScope.content) {
                    return currentScope.content;
                }

                currentScope = currentScope.$parent;
            }

            return null;

        };

    });

view.html

/*This is based around the uSEO-Pro property editor*/

<div id="mySeo" ng-controller="myNamespace.mySeoController">

    <div id="mySeo-wrapper" class="row">

        <div id="google-print" class="col-md-6">
            <h6>Preview Snippet</h6>
            <div class="">
                <div>
                    <h3 ng-show="title.length > 0">{{title}} | {{staticTitle}}</h3>
                    <h3 ng-show="title == null || title.length <= 0">{{pageName}} {{staticTitle}}</h3>
                    <p class="url">{{GetUrl()}}</p>
                    <p class="desc">{{description}}</p>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div id="seo-inputs">
                <div ng-show="disableKeyword == false">
                    <h6>Focus Keyword <small> &nbsp; (at least 3 chars)</small></h6>
                    <input type="text" id="targetKeyword" ng-model="targetKeyword" />

                    <div ng-show="GoogleSuggestions != null && GoogleSuggestions.length >0">
                        <h6>Google Auto-complete suggestions</h6>
                        <span ng-repeat="n in GoogleSuggestions track by $index">
                            <span class="label label-info" style="padding-top:3px; padding-bottom:3px; background-color: #468847; cursor:text;">{{n}}</span>
                        </span>
                    </div>

                </div>

                <h6><i class="icon-section traysettings" ng-show="title.length > 60">&nbsp;</i> Page Title <span ng-show="title.length > 60" class="err">  &nbsp; - &nbsp; Most search engines use a maximum of 60 chars for the title.</span></h6>
                <input type="text" ng-model="title" />

                <h6>Meta Keywords <small> &nbsp; (comma seperated)</small></h6>
                <input type="text" ng-model="keywords" />

                <h6><i class="icon-section traysettings" ng-show="description.length > 160"></i> Meta Description<span ng-show="description.length > 160" class="err">  &nbsp; - &nbsp; Most search engines use a maximum of 160 chars for the description.</span></h6>
                <textarea ng-model="description" style="height:100px"></textarea>

                <hr />

                <div ng-show="disableKeyword == false">
                    <h5>Your target keyword was found in</h5>
                    <ul>
                        <li>Page Title &nbsp; <i class="err icon icon-wrong" ng-show="boolTitle == false"></i> <i class="green icon icon-checkbox" ng-show="boolTitle == true"></i> </li>
                        <li ng-show="isRoot == false">Page URL &nbsp; <i class="err icon icon-wrong" ng-show="boolUrl == false"></i> <i class="green icon icon-checkbox" ng-show="boolUrl == true"></i> </li>
                        <li>Meta Description &nbsp; <i class="err icon icon-wrong" ng-show="boolDescription == false"></i> <i class="green icon icon-checkbox" ng-show="boolDescription == true"></i> </li>                        
                    </ul>                    
                </div>               

            </div>
        </div>

    </div>
</div>