JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/js-md5/0.3.0/md5.min.js"></script>
<script src="//cdn.jsdelivr.net/jdenticon/1.3.2/jdenticon.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="IconCtrl">
    <form ng-submit="addIcon()">
      <label for="icontext">Enter text:</label>
      <input id="icontext" type="text" ng-model="iconText">
      <input type="submit" value="Generate identicon">
    </form>
    
    <canvas ng-repeat="icon in icons" 
            width="120" height="120"
            data-jdenticon-hash="{{icon.hash}}" 
            title="{{icon.text}}">
    </canvas>
  </div>
</div>

JavaScript

angular
	.module("myApp",[])
  
  .directive("jdenticonHash", function() {
    return {
      restrict: "A",
      link: function(scope, el, attrs){
        // el is jqLite wrapped, needs to be unwrapped before passed to Jdenticon
        jdenticon.update(el[0], attrs.jdenticonHash);
      }
    };
  })
  
  .controller("IconCtrl", ["$scope", function($scope) {
    $scope.icons = [];
    $scope.addIcon = function() {
      $scope.icons.push({ text: $scope.iconText || "", hash: md5($scope.iconText || "") });
      $scope.iconText = "";
    };
  }]);