JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="testApp" ng-controller="TestCtrl">
    <div ng-repeat="address in addresses">
        {{address | address}}
    </div>
</div>

JavaScript

(function () {
    "use strict";
    
    var module = angular.module("testApp", []);
    
    module.controller("TestCtrl", ["$scope", function ($scope) {
        $scope.addresses = [{
            Line1: "123 Main St.",
            Line2: "Apartment 2", // Optional
            City: "Chicago",
            State: "IL",
            Zip: "60623"
        }, {
            Line1: "222 Main St.",
            City: "Pittsburgh",
            State: "PA",
            Zip: "15212"
        }];
    }]);
    
    module.filter('address', function ($interpolate) {
        return function (input, template) {
            
            if (input === null || !angular.isDefined(input)) {
                return input;
            }
            
            // template is optional. If not provided, use the following    
            if(!template) {
                template = '{{Line1}}, {{Line2 && (Line2 + \', \') || \'\'}}{{City}} {{State}} {{Zip}}';
            }
            
            try {
                var parsedTemplate = $interpolate(template);
            } catch (e) {
                console.log(parsedTemplate, template, input, e)
                return input;
            }
            
            // Compile the template in the context of the input object
            return parsedTemplate(input);
        };
    });
}());