JSFiddle - React, Tailwind, and code Playground

by Michael Perrenoud

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<div ng-app="app">
    <div ng-controller="ctrl">
        <label><strong>Original Value:</strong> {{originalCampaignName}}</label>
        <label><strong>Input:</strong>

            <input ng-model="campaignName" />
        </label>
        <label campaign-name=""
            input="campaignName"
            counter="execCount"
            original="originalCampaignName">
                <strong>Display:</strong> {{campaignName}}
        </label>
        <label><strong>Execution Count:</strong> {{execCount}}</label>
    </div>
</div>

CSS

label {
    display: block;
    margin: 1rem;
}

JavaScript

var app = angular.module('app', []);
app.directive('campaignName', function () {
    return {
        restrict: 'A',
        scope: {
            counter: '=',
            input: '=',
            original: '='
        },
        link: function (scope, element, attrs) {
            scope.counter++;
            var input = scope.input;

            // AccountName_CampaignName_123445
            if (input.indexOf('_')) {
                scope.original = input;
                scope.input = input.split('_')[1];
            }
        }
    };
});
app.controller('ctrl', function ($scope) {
    $scope.execCount = 0;
    $scope.campaignName = 'AccountName_CampaignName_123445';
});