Dynamically creating buttons for paragraphs with Angularjs

Create a directive and associate it to your div. Ex: Define as binding a parameter with two way data binding, the ones that will keep track of the p elements created inside the div and that will be passed from the the controller associated to your view.

Inject inside your link function of the directive the $element. Then bind to the div with contenteditable the input event in order to detect edits in the div. Inside this code get the total number of p children of your div, and associate it to the variable allowed from the directive. In this way your parameter is always sync with the number of p inside your div, and it can be accessed from outside scopes because you pass it from outside.

Then inside your view, use a ng-repeat iterating over this parameter you passed in the directive, and create your dynamic content inside the ng-repeat.

HTML Code:

<div ng-app="myApp">
  <div ng-controller="Controller">
    <div contenteditable="true" p-inspector p-elements="pElementsNumber">
      TEST
    </div>
    {{pElementsNumber}}
    <div ng-repeat="p in returnArrayFromNumber() track by $index">
      P detected
    </div>
  </div>
</div>

Here the JS code:

angular.module('myApp', [])
.controller('Controller', ['$scope', function($scope) {
    $scope.pElementsNumber = 0;
  $scope.returnArrayFromNumber = function () {
    return new Array($scope.pElementsNumber);
  };
}])
.directive('pInspector', function($rootScope) {
  return {
    restrict: 'A',
    scope: {
      pElements: '='
    },
    link: function ($scope, $element, $attrs) {
        $element.on("input", function(e) {
        var htmlString = $element.text();
        var regex = /<p>[^<p><\/p>]*<\/p>/gi, result, count = 0;
        var count = 0;
        while ( (result = regex.exec(htmlString)) ) {
            count++;
        }
        $scope.pElements = count;
        $rootScope.$apply();
      });
    }
  };
});

Here the running example: https://jsfiddle.net/a0jwmpy4/81/

Just one recommendation: if you want to detect more elements, make this directive dynamic accepting the name of the elements in the parameters and detecting all of them. Please do not create a single directive for every element you want to detect inside the div :)

Hope this helps