Create a simple property editor

app.css

.sap a {
    cursor: pointer;
}

app.html

<div class="sap" ng-controller="SuperAwesomePluginController">
    <h2>Super Awesome Plugin</h2>
    <p>{{model.value}}</p>
    <input type="text" ng-model="model.value"/>
    <a ng-click="getCompliment()">Get compliment</a>
</div>

app.js

angular.module('umbraco').controller('SuperAwesomePluginController', function ($scope) {

    console.log($scope.model);

    $scope.model = $scope.model || "default value";

    $scope.getCompliment = function() {

        if ($scope.model.config.isEnabled === "1") {
            console.log('ouch!');
            $scope.model.value = "Have a good day!";
        }
    }
});

package.manifest

{
  "propertyEditors": [
    {
      "name": "Super Awesome Plugin",
      "alias": "SuperAwesomePlugin",
      "editor": {
        "valueType": "TEXT",
        "view": "~/App_Plugins/SuperAwesomePlugin/app.html"
      },
      "prevalues": {
        "fields": [
          {
            "label": "Is enabled?",
            "description": "A long description",
            "key": "isEnabled",
            "view": "boolean"
          }
        ]
      }
    }
  ],
  "css": [
    "~/App_Plugins/SuperAwesomePlugin/app.css"
  ],
  "javascript": [
    "~/App_Plugins/SuperAwesomePlugin/app.js"
  ]
}