passing a variable string through a textfield for a digital clock in java fxml

im building a stop watch with a digital and analog clock but having trouble with printing the digital clock value mainly because im unsure how to pass the string to the FXML.

why is it that when i try to us id="digitalText" for the textfield in the fxml the program fails but if i were to write it using a text="00:00" it will work properly(just with a text with 00:00 though so no updating the digital clock of course). i would have hoped giving it the id would print the value inside it.

the controller

package tds7xbstopwatchfxml;

import java.awt.TextField;
import java.net.URL;
import java.util.ResourceBundle;
import javafx.animation.Animation;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.Initializable;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.util.Duration;

public class FXMLDocumentController implements Initializable {


@FXML
private ImageView clockFace;

@FXML
private ImageView hand;

@FXML
private TextField digitalText;        

String digital;

Double rotation = 0.0;
Integer ms = 00;
Integer mm = 00;

Timeline timeline = new Timeline(
        new KeyFrame(Duration.millis(1000), (ActionEvent actionEvent) -> {
        updateTimer();
        updateDigital();
        })
);


@FXML
private void stopButton(ActionEvent event) {
    timeline.stop();
}

@FXML
private void startButton(ActionEvent event) {
  timeline.play();

}

@FXML
private void resetButton(ActionEvent event) {
        rotation = 0.0;
        ms = 0;
        mm = 0;
        hand.setRotate(0);
        digital="00:00";
        timeline.stop();
}

public void updateTimer() {
    ms += 1000;
    if (ms >= 60000) {
        ms = 00;
        mm++;
    }

    rotation = (ms / 60000.0) * 360.0;
    hand.setRotate(rotation);
}

public void updateDigital(){
   if(ms/1000<10 && mm<10){
       digital=("0" + String.valueOf(mm) + ":" + "0"  + String.valueOf(ms/1000));
    }
    if(ms/1000>=10 && mm <10){
        digital=("0" + String.valueOf(mm) + ":" + ""  + String.valueOf(ms/1000));
    }
    if(mm>=10 && ms/1000<10){
       digital=("" + String.valueOf(mm) + ":" + "0"  + String.valueOf(ms/1000));      
    }
    if(mm>=10 && ms/1000>=10){
       digital=("" + String.valueOf(mm) + ":" + ""  + String.valueOf(ms/1000));      
    }          
}

@Override
public void initialize(URL url, ResourceBundle rb) {
    clockFace.setImage(new Image(this.getClass().getResourceAsStream("clockface.png")));
    hand.setImage(new Image(this.getClass().getResourceAsStream("hand.png")));    
    timeline.setCycleCount(Animation.INDEFINITE);
    digitalText.setText(digital);
}    
}

i know there are better ways to implement the code for the digital clock but mainly i want to know about passing a changing string to be printed. the digitalText.setText(digital); will cause it to crash

and the fxml

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

<?import javafx.scene.text.*?>
<?import javafx.scene.image.*?>
<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.scene.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<AnchorPane id="AnchorPane" prefHeight="600.0" prefWidth="600.0" styleClass="mainFxmlClass" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="tds7xbstopwatchfxml.FXMLDocumentController">
    <stylesheets>
        <URL value="@stopwatchui.css" />
    </stylesheets>
   <children>
      <StackPane layoutY="94.0" prefHeight="150.0" prefWidth="200.0" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="175.0">
         <children>
            <ImageView fx:id="clockFace" fitHeight="400.0" fitWidth="400.0" pickOnBounds="true" preserveRatio="true" />
            <ImageView fx:id="hand" fitHeight="400.0" fitWidth="400.0" pickOnBounds="true" preserveRatio="true" />
         </children>
      </StackPane>
      <TextField fx:id="digitalText" alignment="CENTER" editable="false" layoutX="204.0" layoutY="123.0" prefHeight="43.0" prefWidth="194.0">
         <font>
            <Font name="Arial" size="23.0" />
         </font>
      </TextField>
      <Button fx:id="stopbutton" layoutX="280.0" layoutY="75.0" onAction="#stopButton" text="Stop" />
      <Button fx:id="startbutton" layoutX="204.0" layoutY="75.0" onAction="#startButton" text="Start" />
      <Button fx:id="resetbutton" layoutX="353.0" layoutY="75.0" onAction="#resetButton" text="Reset" />
   </children>
</AnchorPane>