JSFiddle - React, Tailwind, and code Playground

by GruffBunny

HTML

<div ng-app='MyModule' ng-controller="MyController">
    <div ng-repeat="attr in demographicAttrs">
      <yes-no name=""
        model="ambassador.demographic[attr]"
        update="calcScore(ambassador)"></yes-no>
    </div>
    <p>{{ ambassador | json}}</p>
</div>

JavaScript

angular.module('MyModule', [])

.controller('MyController', function( $scope ) {
    
    $scope.demographicAttrs = ['thing1', 'thing2'];
    
    $scope.ambassador = {
        demographic : {
            thing1: 'thing 1',
            thing2: 'thing 2'
        }
    };
    
    $scope.calcScore = function(ambassador){
    };
})

.directive('yesNo', function() {
  return {
    restrict: 'E',
    replace: true,
    template: '<input type="text" ng-model="model">',
    scope: {
      "name": "@",
      "model": "=",
      "update": "&"
    },
    link: function(scope, element, attrs) {
      scope.$watch('model', function(value) {
        scope.update();
      });
    }
  };
});