exploring how I would design a simple MEF with angularjs

bom.js

function BOM($scope) {
    $scope.Materials = [
    { "id": "MAT/TOMATOSOUP",
        "name": "Tomato soup",
        "unit": "L",
        "Precision": 0.01 
    }, {
        "id": "MAT/ONION",
        "name": "Onion",
        "unit": "PCS",
        "Precision": 1
    }];
    $scope.Recipies = [
    { "id": "REC/TOMATOSOUP",
        "produces": "MAT/TOMATOSOUP",
        "unit": "PCS",
        "Quantity": "1000",
        "Steps": [
            "BOM": [
                 { "id": "REC/TOMATO", "Quantity": 0.5 },
                 { "id": "REC/ONION", "Quantity": 4 }
              ],
            "BOR": [
                 { "id": "RES/MACHINE1", "Quantity": 1 },
                 { "id": "RES/MACHINE2", "Quantity": 2 }
              ]
        ]
    }];
    $scope.Units = [
        { "id": "L", "Name": "Liters", },
        { "id": "PCS", "Name": "Pieces",  },
        { "id": "H","Name":"Hours","Precision":1/6}
    ];
    $scope.Resources = [
             { "id": "RES/MACHINE1", "Name":"Line 1","Precision": 1 },
             { "id": "RES/MACHINE2", "Name": "Line 1", "Precision": 1 }
    ];
}