ProgressBar doesn't work with a fxml file and

So I used this link to set up my progress bar and it worked perfectly fine when I ran this code.

However, with the setup that I have, I can't seem to get the progressbar to actually update... progressBar.getProgress() actually gets the right progress but the UI isn't updated. Here's the code so far:

Main.java

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            FXMLLoader loader = new FXMLLoader(Main.class.getResource("ProgressBarLayout.fxml"));
            AnchorPane root = (AnchorPane) loader.load();
            Scene scene = new Scene(root);
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

ProgressBarController.java

public class ProgressBarController {
    private Task copyWorker;

    @FXML
    private ProgressBar progressBar;

    @FXML
    private void onButtonClick() {
        progressBar = new ProgressBar(0);
         progressBar.setProgress(0);
         copyWorker = createWorker();

         progressBar.progressProperty().unbind();
         progressBar.progressProperty().bind(copyWorker.progressProperty());

         new Thread(copyWorker).start();
    }


    public Task createWorker() {
        return new Task() {
            @Override
            protected Object call() throws Exception {
                for (int i = 0; i < 10; i++) {
                    Thread.sleep(2000);
                    updateMessage("2000 milliseconds");
                    updateProgress(i + 1, 10);

                    System.out.println(progressBar.getProgress());
                }
                return true;
            }
        };
    }
}

ProgressBarLayout.fxml

<?xml version="1.0" encoding="UTF-8"?>

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>

<AnchorPane prefHeight="257.0" prefWidth="434.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.ProgressBarController">
   <children>
      <ProgressBar fx:id="progressBar" layoutX="54.0" layoutY="103.0" prefHeight="51.0" prefWidth="326.0" progress="0.0" />
      <Button layoutX="201.0" layoutY="182.0" mnemonicParsing="false" onAction="#onButtonClick" text="OK" />
   </children>
</AnchorPane>

in your controller you do :

    progressBar = new ProgressBar(0);

this mean it will create a new instance of ProgressBar and it will not use your progressBar from your FXML anymore. Just remove this line, it should works