How do ETags in the HTTP header actually work?

I don't know if I am not correctly understanding how the caching aspect of ETags work if there is some other issue I am dealing with, but I'll walk you through my situation.

From my understanding ETags are a unique hash that is created based on the file information and they are sent as part of Response header to uniquely identify the file. If the file is updated then the info is changed and hence the ETag for the file is also changed.

In my project, I need a fresh JS file to be fetched everytime I make changes to the file. I can't use version tags or unique hashes as part of the file name. I thought an ETag would work where

                 Http Request 
                 GET myFile.js
        Client ------------------> SERVER
                 Http Response 200
                 Http Response Header
                      accept-ranges: bytes
                      cache-control: max-age=86400, public
                      etag: "a7-58c3bb52101c4"
                      ......

                     myFile.js
        Client <------------------ SERVER


        // myFile.js has not been changed

                 Http Request 
                 GET myFile.js
        Client ------------------> SERVER
                 Http Response 304
                 Http Response Header
                      accept-ranges: bytes
                      cache-control: max-age=86400, public
                      etag: "a7-58c3bb52101c4"
                      ......
        Client uses cached version of file

        // myFile has been changed

                 Http Request 
                 GET myFile.js
        Client ------------------> SERVER
                 Http Response 200
                 Http Response Header
                      accept-ranges: bytes
                      cache-control: max-age=86400, public
                      etag: "88-58c3a1cb8474f" // new etag generated
                      ......

                     myFile.js
        Client <------------------ SERVER

So, if you request the file again and no changes have been made..the etag will remain the same and you'll get a 304 will indicate that the cached version should be used.

If the file has been changed the etag will be different as well and a fresh copy of the file will be sent by the server.

This is how I expected it to work.

MY PROBLEM: When I update myFile.js it seems like I never get the new ETag has back. It just defaults to the cahced version of the file. If I clear the cache then I get the latest file and the new ETag. This to me seems to defeat the purpose. Is this how it works or am I understanding something incorrectly here?