JSFiddle - React, Tailwind, and code Playground

HTML

<section ng-app="myApp" ng-controller="myController">
    <div my-directive boo="model">
        <div ng-model="newmodel">
            <span>Model: </span>  <b>{{model}}</b> <br/>
            <span>New Model: </span>  <b>{{newmodel || 'undefined'}}</b>
        </div>
    </div>

</section>

CSS

span{
    color: maroon;
}

JavaScript

var App = angular.module('myApp', [
    'controllers']);

App.directive('boo',['myService', function (myService) {
    return {
        restrict: 'A',
        scope: {
            boo: '='
        },
        controller: function($scope) {
            
            $scope.newmodel = myService.modifyModel($scope.boo);
        },
        link: function (scope, element, attrs) {
            // scope.newmodel = myService.modifyModel(scope.boo);
        }
    };
}]).service('myService', function(){
    this.modifyModel = function(model){
        var newModel = [];
        
        for(var key in model) {
            newModel.push(model[key]);
        }
        
        return newModel;
    }
});


var ctrls = angular.module('controllers', []);
ctrls.controller('myController', ['$scope', function ($scope) {
    $scope.model = {
        a: ['a', 'a1'],
        b: ['b', 'b1']
    };
}]);